Prettier Configuration

Introduction

Prettier is an opinionated code formatter that enforces a consistent code style across languages and file types. This guide explains how to install Prettier, configure `.prettierrc`, and integrate it with your editor and CI.

TL;DR

Install Prettier with a shared `.prettierrc`, enable `formatOnSave` in editors, and run `prettier --check` in CI. Integrate with ESLint using `eslint-config-prettier` to avoid formatting rule conflicts.

Installation

1npm install --save-dev prettier

For ESLint integration:

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

Basic `.prettierrc`

Example configuration:

1{
2  "semi": true,
3  "singleQuote": true,
4  "tabWidth": 2,
5  "useTabs": false,
6  "trailingComma": "es5",
7  "printWidth": 100,
8  "arrowParens": "always",
9  "endOfLine": "lf",
10  "bracketSpacing": true,
11  "bracketSameLine": false,
12  "jsxSingleQuote": false,
13  "plugins": ["prettier-plugin-tailwindcss"]
14}

Command Line Usage

1# Format all files
2npx prettier . --write
3
4# Check formatting
5npx prettier . --check
6
7# Format specific files
8npx prettier "src/**/*.{js,ts,jsx,tsx}" --write

VSCode Integration

Install the Prettier extension (`esbenp.prettier-vscode`) and set as default formatter:

1{
2  "editor.defaultFormatter": "esbenp.prettier-vscode",
3  "editor.formatOnSave": true
4}

Integrating with ESLint

Add `prettier` to `extends` last in your ESLint config to avoid conflicts.

Troubleshooting

• If Prettier does not run on save, ensure the extension is installed and the file type is supported.
• Use `npx prettier --check` in CI to fail builds on formatting issues.

Quick verification

1# Install deps
2pnpm install --save-dev prettier eslint-config-prettier
3
4# Check formatting
5pnpm exec prettier --check .
6
7# Fix formatting
8pnpm exec prettier --write .

Ready For Production

• Use a shared `.prettierrc` and `.prettierignore`
• Run `prettier --check` in CI and fail builds on formatting issues
• Integrate with `eslint-config-prettier` and editor settings

Resources

• Prettier Docs
• Prettier GitHub