Prettier

Installation

We'll follow the outline of Prettier's default installation instructions (opens in a new tab), but with a few modifications.

First, install Prettier as a development dependency:

npm install --save-dev --save-exact prettier

In alignment with our principle around centralizing configuration, we won't be creating a prettierrc.json configuration file. Instead, we'll store our Prettier configuration in our package.json. We're not going to change any of Prettier's options (opens in a new tab) away from default, so we'll simply add an empty prettier key to our package.json to let editors and other tools know we're using Prettier:

  "prettier": {}

We're also not going to create a .prettierignore file. Instead, we'll always run Prettier using the --ignore-path (opens in a new tab) command line option and simply reuse our .gitignore file.

Avoiding Conflicts with ESLint

We want to use ESLint only for finding potential runtime bugs and other code quality issues, not for formatting. To avoid conflicts between Prettier and ESLint, we'll use the eslint-config-prettier (opens in a new tab) package to turn off all of ESLint's formatting rules:

First, we'll install the package:

npm install --save-dev eslint-config-prettier

Then, we'll update our ESLint configuration in package.json to include the new rule set:

"eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "next/core-web-vitals",
      "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint"
    ]
  },

Format Script & Initial Formatting

Add a new format script to your package.json:

  "scripts": {
    "format": "prettier --write . --ignore-path .gitignore"
  }

Then, run the script to format your entire project:

npm run format

VS Code Format on Save

We're going to set up VS Code to run Prettier to automatically format our code each time you save a file. To do this, install the Prettier VS Code Extension (opens in a new tab)

TODO (2 (opens in a new tab)): VS Code "Format on Save" configuration