How to Format On Save in VSCode

With format on save, VSCode will automatically run the formatter whenever you save a file. This is a very handy feature as it keeps your code easy to read without manually run them through code linters or prettifiers.

In this article, we’re going to show you how to enable or disable format on save in VSCode, as well as troubleshoot common errors that prevent format on save from working properly.

Enable/Disable Format On Save

1. Open up VSCode Command Palette by pressing Ctrl + Shift + P.
2. Search and select Open Settings (UI). Just start typing and it will auto-fill. Once there’s a match, you can hit enter immediately, or manually click on the right option.
3. Use the search box in the top to find Editor: Format On Save and tick in the checkbox in front of it to enable the feature. The changes takes place immediately, no need to restart VSCode.
4. Format On Save only work with a formatter installed, and the editor must not be shutting down in the process. That means in case of a power outage, VSCode Format On Save might not work properly.
5. Additionally, you can choose between formatting the whole file or just the modifications upon save by choosing file or modifications in Editor: Format On Save Mode section right below Editor: Format On Save.

Exclude programming format from Format On Save settings

By default, VSCode Format On Save settings are applied globally, regardless of what programming language you’re working with.

Most developers doesn’t code in one language, they may want to enable Format On Save on one programming language and disable it on the others. VSCode allows us to do that through something called language specific settings.

Let’s say we want to exclude JavaScript off of Format On Save settings. Follow these steps to do that.

1. Open up VSCode Command Palette by pressing Ctrl + Shift + P.
2. Search and select Open Settings (JSON) to open settings.json. Just start typing and it will auto-fill. Once there’s a match, you can hit enter immediately, or manually click on the right option. The settings.json contains the exact same settings the UI settings does. In other words, UI settings is just a representation of the JSON-formatted configuration in settings.json.
3. If you enabled Format On Save before, you would see the following line in settings.json (your settings may look different than mine).
4. Add these lines after "editor.formatOnSave": true to exclude JavaScript from auto-formatting upon saving.

   "[javascript]": {
      "editor.formatOnSave": false
   }

5. Add a comma in the end of "editor.formatOnSave": true line to make the settings a valid JSON file. The result should look like this.

   {
      "editor.formatOnSave": true,
      "[javascript]": {
          "editor.formatOnSave": false
      }
   }

6. You don’t have to add a new section for every single language. The [javascript] can include other languages as well, for example, [javascript,go]. For a full list of programming languages that VSCode supports and can automatically detected, see language identifiers page.
7. Similarly, you can globally disable VSCode Format On Save altogether and enable it for only a handful of programming languages.

   {
      "editor.formatOnSave": false,
      "[javascript, python]": {
          "editor.formatOnSave": true
      }
   }

VSCode Format On Save with Prettier

By default, VSCode will use its own built-in formatters for a limited amount of programming language that it supports. If you prefer an opinionated code formatter like Prettier, you have to manually specify it in the settings.

Suppose that you’ve installed Prettier in VSCode. If you didn’t, consult our guide on installing plugins and themes in VSCode. One way to know whether Prettier is properly working is to look at the lower right corner of the editor, if you see Prettier section, then things are good.

The next thing you’re going to do is opening Settings in UI mode either from the Command Palette or Edit > Preferences > Settings. Search for “formatter” in the search box on the top. Once you see Editor: Default Formatter settings, select esbenp.prettier-vscode from the drop down list.

The settings takes place immediately. If you open settings.json now, you will see it in JSON mode.

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}Code language: JSON / JSON with Comments (json)

To be able to enable Prettier for only a few languages, repeat the steps we used in the previous part of this article. In order to do that, edit the settings.json file so it would look like this:

{
  "editor.defaultFormatter": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}Code language: JSON / JSON with Comments (json)

Troubleshoot : VSCode Format On Save not working

In rare cases, VSCode Format On Save may stop working after an update or an OS installation. Below is a few possible solutions you can try.

• Choose a default formatter instead of null – the default value. You might be surprised to learn that the settings may have changed on its own with the updates.
• Uninstall other formatters one by one to see if anything causes the conflict.
• Inspect settings.json, look for anything strange related to defaultFormatter. You may delete all and set them up all over again from scratch if needed.
• Try to format your code manually by pressing Ctrl + Shift + P to open Command Palette and select Format Document. If your file is being properly formatted without any issues, it means there is something wrong in formatOnSave settings. You can try to make further debugging from this point.

VSCode hosts a bunch of other useful features which we’ve covered in our blog. Here’s a few of them if you’re interested :

• How to quickly create a comment block in VSCode
• How to quickly duplicate a line in Visual Studio Code
• How to comment out multiple lines in Visual Studio Code
• How to automatically indent your code in Visual Studio Code