Correctly Configuring Prettier in VS Code

Prettier might be my very favorite tool. It transformed the way that I write code in a way that I never would have considered before I was introduced to it. Since then I have pushed it on every project that I’ve been a part of.

You don’t realize the burden that manually formatting your code puts on you until you don’t have to do it any longer. Some people struggle to give away that control, but I promise you it will make your life better.

Have prettier auto-format your code every time you save a file, and within a few days you’ll instantly be annoyed editing code anywhere that doesn’t provide this functionality.

1. Install the Prettier VS Code extension from the marketplace: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
2. Configure a few VS Code settings:
   1. Editor: Default Formatter: Prettier - Code formatter
      • The formatter that will be used when you tell VS Code to format your file
   2. Editor: Format On Save: ✅ (checked)
      • Every time you save a file, automatically format that file. Never think about code formatting again
   3. Prettier: Require Config: ✅ (checked)
      • Only run prettier in projects that are set up for it. Without this, your PRs in non-prettier repos will be filled with tons of formatting changes that makes it really difficult to review.

Here is the JSON version of that:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.requireConfig": true
}

Those will be enough most of the time. I’ve run into a couple annoyances though that have caused me to also configure two more settings

• Prettier: Document Selectors: **/*.svg, **/*.astro
  • This allows prettier to also run in file types that it usually wouldn’t.
• The default formatters for a couple specific languages to override any other lurking settings
  • I don’t think these are visible in the VS Code settings UI
  • I’ve run into weirdness once or twice where prettier wasn’t working for whatever reason and these seemed to help. Honestly they’re probably unnecessary but I have them set.

{
  "prettier.documentSelectors": ["**/*.svg", "**/*.astro"],

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}