Code · June 1, 2026

How to set up Prettier in 2026

Q: Should I use Prettier or Biome in 2026?

For existing projects already using ESLint, Prettier + `eslint-config-prettier` is the lowest-friction path. For new projects where you want one tool, Biome is faster but has a smaller plugin ecosystem.

Q: Does Prettier work with Tailwind CSS class sorting?

Yes — install `prettier-plugin-tailwindcss` and add it to your `plugins` array in the config.

Q: Can I disable Prettier for a block of code?

Yes: wrap with `// prettier-ignore` (JS) or ` ` (HTML). Use sparingly.

Q: How do I format only changed files manually?

Run `git diff --name-only | xargs prettier --write` to format only files with uncommitted changes.

Prettier ends code-style debates by enforcing a single format on save. This guide covers installation, config, editor integration, and CI enforcement in 2026.

By ByteLedger Team

Prettier is the most widely adopted code formatter in JavaScript ecosystems, and in 2026 it has expanded solid support for TypeScript, JSX, CSS, HTML, JSON, YAML, and Markdown. The core idea is unchanged: take formatting decisions away from humans and hand them to a machine. Here is how to set it up correctly.

What changed in 2026

Prettier 4.x introduced a faster Rust-based formatter core (shared with Biome) while keeping the same config API. Format time on large files dropped ~60 %.
VS Code and Cursor both ship Prettier integration built-in — you no longer need to install the extension manually on most setups.
eslint-config-prettier v10 simplified the setup: one line in your ESLint flat config is all that is needed.
Biome is a credible all-in-one alternative that combines formatting and linting. Prettier is still the default choice for existing JS/TS projects; Biome wins on greenfield speed benchmarks.

Install

npm install --save-dev prettier

Create the config file. Prettier 4 supports prettier.config.mjs:

// prettier.config.mjs
/** @type {import("prettier").Config} */
export default {
  semi: true,
  singleQuote: true,
  printWidth: 100,
  trailingComma: 'all',
  tabWidth: 2,
};

Add a .prettierignore to skip generated files:

node_modules
dist
.next
coverage
*.min.js

Editor integration (VS Code / Cursor)

In .vscode/settings.json:

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

Commit this file so the whole team gets the same behavior.

ESLint integration

Use eslint-config-prettier to disable ESLint rules that conflict with Prettier's formatting decisions:

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

In eslint.config.mjs (flat config):

import prettierConfig from 'eslint-config-prettier';

export default [
  // ... your other configs
  prettierConfig,  // must be last — turns off conflicting rules
];

Concern	Tool
Formatting (indentation, quotes, semicolons)	Prettier
Code logic / potential bugs	ESLint
Import order	ESLint (eslint-plugin-import)
Unused variables	ESLint
Accessibility	eslint-plugin-jsx-a11y

Pre-commit hook with lint-staged

npm install --save-dev lint-staged
npx husky init

In package.json:

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx,json,css,md}": "prettier --write"
  }
}

In .husky/pre-commit:

npx lint-staged

This runs Prettier only on staged files — fast even in large repos.

CI enforcement

Add a check step that fails if any file is not formatted:

# .github/workflows/ci.yml
- name: Check formatting
  run: npx prettier --check .

--check exits non-zero if any file would change. This catches files that bypassed the pre-commit hook.

How to pick your config options

printWidth — 80 is the default, 100 or 120 works better for TypeScript with long generics.
singleQuote: true — common in JS/TS projects; JSON always uses double quotes regardless.
trailingComma: 'all' — reduces diff noise in function argument lists and arrays.
semi: true — keep semicolons unless your team has a strong existing preference.
Everything else — accept Prettier defaults. Every overridden rule is a decision to re-litigate later.

Common mistakes

Running prettier --write . in CI. Use --check in CI, --write locally. Writing in CI masks problems.

Forgetting .prettierignore. Prettier will try to format dist/ and node_modules/ if you do not exclude them, making the check step very slow.

Config conflict with ESLint. If ESLint enforces "quotes": ["error", "double"] and Prettier enforces singleQuote: true, every file will fail one or the other. Always add eslint-config-prettier.

Per-developer config. If the config lives only in editor settings and not in prettier.config.mjs, formatting will diverge between teammates.

What to skip

Customizing Prettier rules extensively. The value of Prettier is not arguing about rules. Configuring 15 options defeats the purpose.
Running Prettier on the entire repo history in a single commit. It pollutes git blame. Use --ignore-revisions (.git-blame-ignore-revs) after the formatting commit.
Prettier for Python projects. Use ruff format or black instead; Prettier's Python support is experimental.

FAQ

Should I use Prettier or Biome in 2026? For existing projects already using ESLint, Prettier + eslint-config-prettier is the lowest-friction path. For new projects where you want one tool, Biome is faster but has a smaller plugin ecosystem.

Does Prettier work with Tailwind CSS class sorting? Yes — install prettier-plugin-tailwindcss and add it to your plugins array in the config.

Can I disable Prettier for a block of code? Yes: wrap with // prettier-ignore (JS) or  (HTML). Use sparingly.

How do I format only changed files manually? Run git diff --name-only | xargs prettier --write to format only files with uncommitted changes.