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:

https://prettier.io/docs/en/editors.html