Prettier — Opinionated Code Formatter for Consistent Style

What it is

Prettier is an opinionated code formatter that rewrites your source files to enforce a single, consistent style. It supports JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, Markdown, and many other languages through plugins.

Prettier is built for teams who want to stop arguing about tabs vs spaces, trailing commas, and line length. You configure it once, integrate it into your editor or CI pipeline, and every file follows the same rules from that point forward.

Why it saves time or tokens

Manual formatting eats developer hours. Code review comments about style waste everyone's attention. Prettier eliminates both problems by making formatting automatic and deterministic. The same input always produces the same output, so diffs stay clean and reviewers focus on logic instead of semicolons.

When working with AI coding assistants, Prettier ensures that generated code matches your project style without manual cleanup. This reduces the back-and-forth token cost of asking an LLM to reformat its output.

How to use

1. Install Prettier in your project: npm install --save-dev prettier
2. Create a .prettierrc config file with your preferred options (or use the defaults)
3. Run npx prettier --write . to format all files, or integrate with your editor for format-on-save

Example

{
  'semi': false,
  'singleQuote': true,
  'tabWidth': 2,
  'trailingComma': 'es5',
  'printWidth': 80
}

With this .prettierrc, Prettier drops semicolons, uses single quotes, 2-space tabs, trailing commas in ES5-valid positions, and wraps at 80 characters.

Related on TokRepo

• AI tools for coding — browse more developer productivity tools on TokRepo
• Automation tools — formatters, linters, and CI helpers curated on TokRepo

Common pitfalls

• Running Prettier without a .prettierignore can reformat generated files, vendor code, or build artifacts you did not intend to touch
• Combining Prettier with ESLint style rules causes conflicts; use eslint-config-prettier to disable overlapping ESLint rules
• Forgetting to add Prettier to your CI pipeline means developers who skip editor integration will push unformatted code