Configure Prettier integration in VSCode or Jetbrains IDEs for a project

For any given project, add the following settings to a.vscode/settings.json file in the root of your Git repo.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.documentSelectors": [
    "**/*.{ts,js,tsx,jsx,css,scss,html,md}"
  ],
  "editor.formatOnSave": true
}

Then add some documentation to your README.md:

## Quick start

// Other instructions (e.g., npm install, npm start, etc)

### Setup Prettier integration

This project uses [Prettier](https://prettier.io/) for formatting. Most editors
& IDEs can be configured to automatically run Prettier on save / format.

#### VSCode

Install
the [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
and thanks to [`.vscode/settings.json`](./.vscode/settings.json), Prettier
should run when you save a file.

#### Jetbrains IDEs

- Install the [Prettier](https://www.jetbrains.com/help/idea/prettier.html)
  plugin.
- Go to _Preferences > Languages & Frameworks > Prettier_.
- If not already set, set _Prettier package_
  to `<path-of-repo-on-disk>/node_modules/prettier`.
- Set _Run for files_ to `{**/*,*}.{js,ts,jsx,tsx,md,html,css,scss}`.
- Check the _On 'Reformat code' action_ and _On save_ options and save the
  settings.
- Now, Prettier should run whenever you save a file.

Sources

Tagged: JavaScript tooling