How to Set Up VS Code to Automatically Format Your Code on Save

If you’re looking to streamline your coding workflow and ensure consistent code formatting, setting up Visual Studio Code (VS Code) to automatically format your code on save is a game-changer. In this step-by-step guide, I’ll walk you through the process of configuring VS Code to format your code automatically every time you save a file.

Step 1: Install Prettier Extension

Prettier is one of the most popular code formatters, and it integrates seamlessly with VS Code. Here’s how to install it:

Open VS Code: Launch Visual Studio Code on your computer.

Go to Extensions View: Click on the Extensions icon in the sidebar (or press Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS).

Search for Prettier: In the search bar, type “Prettier - Code formatter”.

Install Prettier: Click the Install button on the Prettier extension. It’s typically the first result in the search.

Step 2: Configure VS Code to Use Prettier as the Default Formatter

To ensure that Prettier formats your code, you need to set it as the default formatter:

Open Settings: Click on the gear icon in the lower-left corner of the VS Code window and select “Settings” (or press Ctrl+, on Windows/Linux or Cmd+, on macOS).

Search for Default Formatter: In the search bar at the top of the Settings pane, type “default formatter”.

Set Prettier as Default: Look for the setting labeled “Editor: Default Formatter” and set its value to esbenp.prettier-vscode. This tells VS Code to use Prettier for formatting.

Step 3: Enable Format on Save

Now that Prettier is set as the default formatter, you need to enable the “format on save” feature:

Open Settings: If you’re not already in the Settings view, open it by clicking the gear icon and selecting “Settings” or by pressing Ctrl+, (Windows/Linux) or Cmd+, (macOS).

Search for Format On Save: Type “format on save” into the search bar.

Enable Format On Save: Check the box next to “Editor: Format On Save”. This ensures that every time you save a file, VS Code will automatically format it using Prettier.

Step 4: Optional - Configure Prettier Settings

Prettier offers various configuration options to tailor formatting to your preferences. You can set these options in a configuration file:

Create a Prettier Configuration File: In your project’s root directory, create a file named .prettierrc (or .prettierrc.json, .prettierrc.yaml, etc., depending on your preferred format).

Add Configuration Options: Here’s an example of a basic .prettierrc file:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

This configuration disables semicolons, uses single quotes, and sets the tab width to 2 spaces. You can customize these options according to your coding style.

Save the Configuration File: Save your .prettierrc file in the root of your project. Prettier will automatically pick up these settings when formatting your code.

Step 5: Verify Your Setup

To ensure everything is working correctly:

Open a File: Open a file in VS Code that you want to format.

Make Some Changes: Edit the file to create some formatting inconsistencies.

Save the File: Save the file by pressing Ctrl+S (Windows/Linux) or Cmd+S (macOS).

You should see your code automatically formatted according to your Prettier settings.

Troubleshooting

If formatting doesn’t work as expected:

Check for Errors: Ensure there are no syntax errors in your code that might prevent formatting.

Verify Extensions: Make sure Prettier is installed and enabled in your extensions.

Configuration Conflicts: Check for other formatting extensions that might conflict with Prettier.

Workspace Settings: Sometimes workspace-specific settings (in .vscode/settings.json) might override global settings. Ensure “format on save” is enabled in both global and workspace settings if necessary.

Conclusion

Configuring VS Code to format your code automatically on save using Prettier is a straightforward process that can greatly enhance your coding efficiency. By following these steps, you’ll ensure that your code is consistently formatted, saving you time and effort while improving readability. Happy coding!