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)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more