{"post":{"slug":"how-to-set-up-prettier-2026","title":"How to set up Prettier in 2026","excerpt":"Prettier ends code-style debates by enforcing a single format on save. This guide covers installation, config, editor integration, and CI enforcement in 2026.","category":"code","date":"March 16, 2026","author":"ByteLedger Team","content":"<span class=\"dropcap\">P</span>rettier 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.\n\n## What changed in 2026\n\n- **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 %.\n- **VS Code and Cursor both ship Prettier integration built-in** — you no longer need to install the extension manually on most setups.\n- **`eslint-config-prettier` v10** simplified the setup: one line in your ESLint flat config is all that is needed.\n- **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.\n\n## Install\n\n```bash\nnpm install --save-dev prettier\n```\n\nCreate the config file. Prettier 4 supports `prettier.config.mjs`:\n\n```js\n// prettier.config.mjs\n/** @type {import(\"prettier\").Config} */\nexport default {\n  semi: true,\n  singleQuote: true,\n  printWidth: 100,\n  trailingComma: 'all',\n  tabWidth: 2,\n};\n```\n\nAdd a `.prettierignore` to skip generated files:\n\n```\nnode_modules\ndist\n.next\ncoverage\n*.min.js\n```\n\n## Editor integration (VS Code / Cursor)\n\nIn `.vscode/settings.json`:\n\n```json\n{\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n  \"editor.formatOnSave\": true,\n  \"[javascript]\": { \"editor.defaultFormatter\": \"esbenp.prettier-vscode\" },\n  \"[typescript]\": { \"editor.defaultFormatter\": \"esbenp.prettier-vscode\" },\n  \"[json]\": { \"editor.defaultFormatter\": \"esbenp.prettier-vscode\" }\n}\n```\n\nCommit this file so the whole team gets the same behavior.\n\n## ESLint integration\n\nUse `eslint-config-prettier` to disable ESLint rules that conflict with Prettier's formatting decisions:\n\n```bash\nnpm install --save-dev eslint-config-prettier\n```\n\nIn `eslint.config.mjs` (flat config):\n\n```js\nimport prettierConfig from 'eslint-config-prettier';\n\nexport default [\n  // ... your other configs\n  prettierConfig,  // must be last — turns off conflicting rules\n];\n```\n\n| Concern | Tool |\n| --- | --- |\n| Formatting (indentation, quotes, semicolons) | Prettier |\n| Code logic / potential bugs | ESLint |\n| Import order | ESLint (eslint-plugin-import) |\n| Unused variables | ESLint |\n| Accessibility | eslint-plugin-jsx-a11y |\n\n## Pre-commit hook with lint-staged\n\n```bash\nnpm install --save-dev lint-staged\nnpx husky init\n```\n\nIn `package.json`:\n\n```json\n{\n  \"lint-staged\": {\n    \"*.{js,ts,jsx,tsx,json,css,md}\": \"prettier --write\"\n  }\n}\n```\n\nIn `.husky/pre-commit`:\n\n```bash\nnpx lint-staged\n```\n\nThis runs Prettier only on staged files — fast even in large repos.\n\n## CI enforcement\n\nAdd a check step that fails if any file is not formatted:\n\n```yaml\n# .github/workflows/ci.yml\n- name: Check formatting\n  run: npx prettier --check .\n```\n\n`--check` exits non-zero if any file would change. This catches files that bypassed the pre-commit hook.\n\n## How to pick your config options\n\n1. **`printWidth`** — 80 is the default, 100 or 120 works better for TypeScript with long generics.\n2. **`singleQuote: true`** — common in JS/TS projects; JSON always uses double quotes regardless.\n3. **`trailingComma: 'all'`** — reduces diff noise in function argument lists and arrays.\n4. **`semi: true`** — keep semicolons unless your team has a strong existing preference.\n5. **Everything else** — accept Prettier defaults. Every overridden rule is a decision to re-litigate later.\n\n## Common mistakes\n\n**Running `prettier --write .` in CI.** Use `--check` in CI, `--write` locally. Writing in CI masks problems.\n\n**Forgetting `.prettierignore`.** Prettier will try to format `dist/` and `node_modules/` if you do not exclude them, making the check step very slow.\n\n**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`.\n\n**Per-developer config.** If the config lives only in editor settings and not in `prettier.config.mjs`, formatting will diverge between teammates.\n\n## What to skip\n\n- **Customizing Prettier rules extensively.** The value of Prettier is *not arguing about rules*. Configuring 15 options defeats the purpose.\n- **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.\n- **Prettier for Python projects.** Use `ruff format` or `black` instead; Prettier's Python support is experimental.\n\n## FAQ\n\n**Should I use Prettier or Biome in 2026?**\nFor 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.\n\n**Does Prettier work with Tailwind CSS class sorting?**\nYes — install `prettier-plugin-tailwindcss` and add it to your `plugins` array in the config.\n\n**Can I disable Prettier for a block of code?**\nYes: wrap with `// prettier-ignore` (JS) or `<!-- prettier-ignore -->` (HTML). Use sparingly.\n\n**How do I format only changed files manually?**\nRun `git diff --name-only | xargs prettier --write` to format only files with uncommitted changes.\n\n## Where to go next\n\n- [How to set up pre-commit hooks in 2026](/blog/how-to-set-up-pre-commit-hooks-2026)\n- [How to write a GitHub Action in 2026](/blog/how-to-write-a-github-action-2026)\n- [How to set up a monorepo in 2026](/blog/how-to-set-up-a-monorepo-2026)","hue":306,"metaTitle":"How to Set Up Prettier in 2026: Config, ESLint, and CI","metaDescription":"Step-by-step guide to setting up Prettier in 2026. Install, configure, integrate with ESLint, add format-on-save, and enforce formatting in CI.","keywords":["how to set up prettier 2026","prettier configuration 2026","prettier eslint integration","prettier pre-commit hook","format on save vscode","prettier ci enforcement","prettier lint-staged","code formatting 2026","prettier config file","javascript code style 2026"],"tldr":["**Install once, configure once, forget about style forever** — Prettier's opinionated defaults are good enough for most teams.","**Editor integration is mandatory** — format-on-save removes all friction; format-in-CI catches the rest.","**Prettier and ESLint do different jobs** — Prettier formats, ESLint lints logic; use `eslint-config-prettier` to prevent conflicts.","**Add a pre-commit hook via lint-staged** — fast, runs only on changed files, keeps CI green.","**Skip:** arguing over rules Prettier already decides — semicolons, trailing commas, quote style; just accept the output."],"readTime":"4 min read","wordCount":803},"related":[{"slug":"what-is-a-formatter-vs-linter-2026","title":"Formatter vs linter in 2026: what each one actually does","excerpt":"A formatter rewrites layout; a linter judges the code for risk. Here is what each tool actually checks in 2026, why most projects need both, and how to stop them from fighting each other.","category":"code","date":"July 17, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":310},{"slug":"how-to-set-up-eslint-2026","title":"How to set up ESLint in 2026: flat config, TypeScript, and team rules","excerpt":"ESLint moved to flat config in 2024 and it is now the universal standard. This is the 2026 guide to a fast, effective ESLint setup for TypeScript projects.","category":"code","date":"April 3, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":322},{"slug":"how-to-set-up-pre-commit-hooks-2026","title":"How to set up pre-commit hooks in 2026","excerpt":"Pre-commit hooks catch formatting errors, lint failures, and secrets before they reach CI. Here is how to set them up reliably in 2026.","category":"code","date":"April 3, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":307}],"sameCategory":[{"slug":"bazel-build-explained-2026","title":"Bazel Explained: What Hermetic Builds Actually Cost","excerpt":"Bazel delivers reproducible, precisely cached builds and demands that you describe everything. Here is what you get, what it costs, and who should say no.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":145},{"slug":"graphql-federation-2026","title":"GraphQL Federation: One Graph, Many Teams","excerpt":"Federation composes independently-owned subgraphs into a single API. Here is what it solves, the operational cost it adds, and when a simpler gateway is enough.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":300},{"slug":"hermetic-builds-explained-2026","title":"Hermetic Builds Explained: Same Inputs, Same Output","excerpt":"A hermetic build depends only on declared inputs. Here is what that property gives you, the common leaks that break it, and how to move toward it incrementally.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},{"slug":"monorepo-tooling-compared-2026","title":"Monorepo Tooling Compared: What You Actually Need","excerpt":"Monorepo tools solve task orchestration and caching, not repository layout. Here is what each tier provides and how to tell when you have outgrown the simple option.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":150}],"newer":{"slug":"how-to-set-up-postgres-locally-2026","title":"How to set up Postgres locally in 2026: Docker, pgvector, and dev workflow","excerpt":"Running Postgres locally in 2026 means Docker Compose, pgvector for AI workloads, and a repeatable seed script. This guide gets you from zero to a productive dev database.","category":"code","date":"March 16, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":322},"older":{"slug":"how-to-set-up-two-factor-2026","title":"How to set up two-factor authentication in 2026: the right way","excerpt":"Two-factor authentication stops the vast majority of account takeovers, but not all 2FA methods are equal. Here is how to set up the best type and avoid the weak ones.","category":"tech","date":"March 16, 2026","author":"ByteLedger Team","readTime":"5 min read","hue":250}}