Logo

dev-resources.site

for different kinds of informations.

VSCode Prettier format on save

Published at
1/3/2025
Categories
vscode
prettier
Author
Sarkis Peha
Categories
2 categories in total
vscode
open
prettier
open
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"
}

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

{
    "tabWidth": 4
}

Featured ones: