Adding Prettier to Your Project

Jul 1, 2024

Prettier is an opinionated code formatter that automatically enforces consistent style rules for code, reducing formatting errors and improving readability.

Maintaining consistent code style across a project can be challenging, especially when working in a team. Enter Prettier, an opinionated code formatter that automatically formats your code to ensure consistency. Let's explore how to add it to our node-based projects.

Installation

First, install Prettier locally:

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

yarn add --dev --exact prettier

pnpm add --save-dev --save-exact prettier

bun add --dev --exact prettier

Then, create an empty configuration file to let code editors and other tools know you are using Prettier:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Alternatively, if you want an example, here's one I use:

{
  "$schema": "https://json.schemastore.org/prettierrc.json",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "consistent",
  "trailingComma": "none",
  "bracketSpacing": false,
  "bracketSameLine": true,
  "arrowParens": "always",
  "proseWrap": "never",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto",
  "singleAttributePerLine": false,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

Refer to Prettier's documentation on the Configuration File.

Next, create a .prettierignore file to let Prettier CLI and code editors know which files and directories to not format. For example:

build
public
package-lock.json

This example would have Prettier ignore the build, the public directories, and the package-lock.json file.

Now you can format all files with Prettier using:

npx prettier . --write

yarn prettier . --write

pnpm exec prettier . --write

bun prettier . --write

Adding Scripts to Format the Entire Codebase

We can create scritps inside the package.json file to make it easier for us to check and format the entire codebase with a simple npm/pnpm/yarn/bun command.

Inside your package.json add the following scripts to check and format the codebase with Prettier.

"scripts": {
    "check": "npx prettier . --check",
    "format": "npx prettier . --write"
}

And just like that, you can use:

# Check for formatting errors
npm run check

# Fix formatting errors
npm run format

# Check for formatting errors
yarn run check

# Fix formatting errors
yarn run format

# Check for formatting errors
pnpm run check


# Fix formatting errors
pnpm run format

# Check for formatting errors
bun run check

# Fix formatting errors
bun run format

#prettier #tutorials