Configure Prettier integration in VSCode or Jetbrains IDEs for a project
19 October 2022 (Updated 19 October 2022)
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
Thanks for your comment 🙏. Once it's approved, it will appear here.
Leave a comment