In this guide, we are integrating the prettier
formatter in our projects. We
can break it down to the following steps:
- Installation
- Run as Git hook
- VSCode integration
Installation
Instead of using npx
we will install prettier
locally, because we want to
lock down the version of prettier
and it will be faster to execute each time.
npm install --save-dev --save-exact prettier@v3
Prettier ships with a set of sensible defaults, but if we want to override any of them, here’s what to do:
Create a .prettierrc.json
file in root directory.
Here’s an example configuration file:
{
"tabWidth": 2,
"singleQuote": true,
"printWidth": 120,
"semi": false,
"overrides": [
{
"files": "*.md",
"options": {
"printWidth": 80
}
}
]
}
Notice how we overrided the configuration for all md
files. See more
documentation about overrides and all the available options on the official
website:
https://prettier.io/docs/en/options.html
It is also a good idea to have a .prettierignore
file. This will tell
prettier
which files or directories to ignore. Most projects will have few
compiled files and directories that should be ignored (take ideas from
.gitignore
).
*.log
coverage/
node_modules/
public/
Next, we can run the check
command to see which files in our repository is
not formatted correctly:
npx prettier --check .
And if we wish to format all the files according to our configurations:
npx prettier --write .
Run as Git hook
Manually formatting the files in our repository is not ideal. We want to run
prettier
as a Git hook. This will ensure that the files are formatted
correctly when we commit them.
We can use the husky
and lint-staged
packages. Install them with:
npm install --save-dev --save-exact husky@v8 lint-staged@v13
Next, we add a prepare
script and a pre-commit
hook:
npm pkg set scripts.prepare="husky install"
npm run prepare
npx husky add .husky/pre-commit "npx lint-staged"
This will create a pre-commit
shell script in .husky
directory.
And we add the lint-staged
configuration to package.json
:
{
// other package.json configurations...
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
}
Now, when we try to commit, prettier
will run and format all the files that
are staged for commit.
VSCode Integration
Lastly, we want to integrate prettier
with VSCode. This will allow us to
format the files as we save them which gives us a faster feedback loop.
Install the prettier
extension in VSCode.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Once we have the extension installed, we need to set it as the default formatter and enable format on save.
In VSCode, open the user settings.json
file by opening up the Command Palette:
Shift + Command + P
(Mac) or Ctrl + Shift + P
(Windows/Linux) and search for
Open User Settings (JSON)
.
Make sure these two lines are in the settings.json
file:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
Now, when we save a file, it will be formatted automatically ✨.
For other editor integrations, see the official website: