Skip to main content

Use Prettier with VSCode

ยท One min read

Forget about manually running Prettier.

First you need to install the VSCode Prettier extension.

Open the command palette and type "Preferences: Open Settings (JSON)". Then enable the "format on save" setting globally:

{
"editor.formatOnSave": true
}

You can also set it for a specific language:

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

You might also want to set Prettier as your default formatter for Javascript(or any language you want to use it for). If you don't, you'll see a prompt the first time you try to format your code.

{
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

Now everytime you save a Javascript file, Prettier will format it. The extension will pick up local configuration files. If there is none, it will use the default global config.