Prettier Setup

Install and configure Prettier for consistent code formatting across your React and Next.js project.

Recipe

Quick-reference recipe card — copy-paste ready.

# Install Prettier
npm install --save-dev prettier
 
# Check formatting (CI-friendly, exits with error on violations)
npx prettier --check .
 
# Format all files
npx prettier --write .
 
# Format specific files
npx prettier --write "src/**/*.{ts,tsx,css,json}"

When to reach for this: Every project with more than one contributor, or any project where you want to stop debating code style.

Working Example

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

# .prettierignore
node_modules/
.next/
out/
coverage/
pnpm-lock.yaml
package-lock.json
*.min.js

// package.json scripts
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

// .vscode/settings.json (format on save)
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

What this demonstrates:

.prettierrc with recommended settings for React/Next.js projects
.prettierignore to skip build output and lock files
npm scripts for formatting and checking
VS Code format-on-save configuration

Deep Dive

How It Works

Prettier is an opinionated code formatter — it parses your code and reprints it with a consistent style
It supports TypeScript, JSX, CSS, JSON, Markdown, and more out of the box
The .prettierrc file controls options; most teams only change a few defaults
--check exits with a non-zero code when files are not formatted (use in CI)
--write formats files in place

Variations

Key options explained:

Option	Default	Recommended	What It Does
`semi`	`true`	`true`	Add semicolons at the end of statements
`singleQuote`	`false`	`false` or `true`	Use single quotes instead of double
`tabWidth`	`2`	`2`	Number of spaces per indentation level
`trailingComma`	`"all"`	`"all"`	Add trailing commas everywhere valid
`printWidth`	`80`	`80`	Line length before wrapping
`bracketSpacing`	`true`	`true`	Spaces in object literals `{ foo }`
`arrowParens`	`"always"`	`"always"`	Parentheses around single arrow function parameters
`endOfLine`	`"lf"`	`"lf"`	Line ending style

Tailwind CSS class sorting:

npm install --save-dev prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

This plugin automatically sorts Tailwind classes in the recommended order.

Supported config file formats:

.prettierrc (JSON)
.prettierrc.json
.prettierrc.js or .prettierrc.cjs
.prettierrc.mjs
prettier.config.js
"prettier" key in package.json

TypeScript Notes

// Prettier handles TypeScript formatting out of the box.
// No additional parser or plugin needed for .ts and .tsx files.
 
// It formats type annotations, generics, interfaces, and
// type unions consistently:
type Props = {
  name: string;
  age: number;
  onSubmit: (data: FormData) => void;
};

Gotchas

Things that will bite you. Each gotcha includes what goes wrong, why it happens, and the fix.

Conflicts with ESLint — Prettier and ESLint both want to control formatting. Running both without coordination produces an infinite fix loop. Fix: Use eslint-config-prettier to disable ESLint formatting rules. See ESLint + Prettier Integration.
printWidth is not a hard limit — Prettier treats printWidth as a guideline, not a maximum. Long strings, imports, and JSX props may exceed it. Fix: Accept this behavior; Prettier optimizes for readability, not strict column limits.
Format on save not working — VS Code may use a different default formatter. Fix: Set "editor.defaultFormatter": "esbenp.prettier-vscode" and ensure the extension is installed.
.prettierignore is required — Without it, Prettier formats build output, lock files, and generated code. Fix: Always create a .prettierignore file, or Prettier will waste time on files you do not care about.
Plugin load order matters — If you use multiple Prettier plugins, they can conflict. Fix: prettier-plugin-tailwindcss should always be listed last in the plugins array.

Alternatives

Other ways to solve the same problem — and when each is the better choice.

Alternative	Use When	Don't Use When
Biome	You want a single tool for linting and formatting	You need Prettier plugins (e.g., Tailwind sorting)
`dprint`	You want a fast Rust-based formatter with more config options	You want zero-config opinionated formatting
Editor-only formatting	Solo project with only one editor	Team project or CI enforcement is needed

FAQs

What is the difference between --check and --write?

--check exits with a non-zero code if any file is not formatted (use in CI).
--write formats files in place (use locally).
Never use --write in CI; it would modify files without committing them.

Why is a .prettierignore file required?

Without it, Prettier formats build output (.next/), lock files, and generated code.
This wastes time and can produce unwanted changes.
Always create .prettierignore to skip files you do not care about.

Gotcha: Why does Prettier exceed my printWidth setting?

printWidth is a guideline, not a hard maximum.
Prettier optimizes for readability, so long strings, imports, and JSX props may exceed it.
Accept this behavior; enforcing strict column limits would produce worse formatting.

How do I set up format-on-save in VS Code?

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Set the default formatter both globally and per language.

What config file formats does Prettier support?

.prettierrc (JSON)
.prettierrc.json, .prettierrc.js, .prettierrc.cjs, .prettierrc.mjs
prettier.config.js
"prettier" key in package.json

How do I add Tailwind CSS class sorting?

npm install --save-dev prettier-plugin-tailwindcss

{ "plugins": ["prettier-plugin-tailwindcss"] }

This plugin must be listed last in the plugins array.

Gotcha: Why does format-on-save not work even though Prettier is installed?

VS Code may be using a different default formatter.
Multiple formatter extensions installed cause ambiguity.
Set "editor.defaultFormatter": "esbenp.prettier-vscode" explicitly per language.

Does Prettier handle TypeScript files out of the box?

Yes. No additional parser or plugin is needed for .ts and .tsx files.
Prettier formats type annotations, generics, interfaces, and type unions.

What are the recommended Prettier settings for a Next.js project?

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "endOfLine": "lf"
}

How do I format only specific file types?

npx prettier --write "src/**/*.{ts,tsx,css,json}"

Use glob patterns to target specific extensions.

Does Prettier conflict with ESLint?

Yes, if both are configured to handle formatting.
Use eslint-config-prettier to disable ESLint formatting rules.
See ESLint + Prettier Integration for the full setup.

Can I use Prettier to sort TypeScript imports?

Prettier does not sort imports by default.
Use prettier-plugin-organize-imports or @ianvs/prettier-plugin-sort-imports for import sorting.
Alternatively, use ESLint's import/order rule.

ESLint + Prettier Integration — make ESLint and Prettier work together
EditorConfig & VS Code Settings — cross-editor consistency
Husky & lint-staged — format on commit
Linting in CI/CD — enforce formatting in CI