DEV Community

Sarkis Peha
Sarkis Peha

Posted on

VSCode Prettier format on save

If this serves no other person than my future self, so be it. I find I'm always forgetting simple set-ups that take a few steps and never re-visit until I'm installing settings on a new machine. To get Prettier to do all its magic upon saving a file, follow this cookbook:

1. Install Prettier extension in VSCode.
2. Cmd + shift + p and search Open User Settings (JSON)
Image description
3. Add the following to the settings.json

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}
Enter fullscreen mode Exit fullscreen mode

4. Add the file .prettierrc to the root of the project and add options as one sees fit.

{
    "tabWidth": 4
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)