prettier

Prettier is an opinionated code formatter

weekly downloads68.2M

versionv3.8.1

licenseMIT

categorytoolchain

Overview

Prettier is an opinionated code formatter that enforces consistent code style by parsing your code and reprinting it according to its own rules. With over 68 million weekly downloads and adoption by thousands of companies, it has become the de facto standard for automated code formatting in JavaScript projects.

Unlike traditional linters that warn about style violations, Prettier actually rewrites your code to match its formatting rules. It handles maximum line length, indentation, quotes, semicolons, trailing commas, and dozens of other stylistic decisions automatically. The tool supports JavaScript, TypeScript, JSX, JSON, CSS, SCSS, HTML, Markdown, YAML, and GraphQL out of the box, with additional languages available through plugins.

Prettier was created to end debates about code style within development teams. By providing minimal configuration options and strong defaults, it eliminates the need for style guide documents and code review discussions about formatting. The trade-off is intentional: you sacrifice complete control over formatting in exchange for never having to think about it again. This philosophy has resonated with the JavaScript community, making Prettier an essential part of modern development workflows alongside tools like ESLint and TypeScript.

Quick Start

typescript

// Install: npm install --save-dev prettier

// prettier.config.js
module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  printWidth: 80,
  arrowParens: 'avoid',
};

// format-code.js - Programmatic usage
import prettier from 'prettier';
import fs from 'fs/promises';

const sourceCode = `
const user={name:"John",age:30,email:"john@example.com"};
function greet(name){return "Hello, "+name+"!";}
const numbers=[1,2,3,4,5].map(n=>n*2).filter(n=>n>5);
`;

async function formatCode() {
  // Format code with inferred parser
  const formatted = await prettier.format(sourceCode, {
    parser: 'babel',
    semi: true,
    singleQuote: true,
  });

  console.log('Formatted code:');
  console.log(formatted);

  // Check if a file needs formatting
  const filePath = './src/app.js';
  const fileContent = await fs.readFile(filePath, 'utf8');
  const options = await prettier.resolveConfig(filePath);
  const isFormatted = await prettier.check(fileContent, {
    ...options,
    filepath: filePath,
  });

  if (!isFormatted) {
    const formatted = await prettier.format(fileContent, {
      ...options,
      filepath: filePath,
    });
    await fs.writeFile(filePath, formatted);
    console.log(`Formatted ${filePath}`);
  }
}

formatCode().catch(console.error);

Use Cases

Enforcing team code standards: Integrate Prettier into your pre-commit hooks using husky and lint-staged to automatically format all staged files before they're committed, ensuring no inconsistently formatted code enters the repository.

Editor integration for real-time formatting: Configure Prettier to run on file save in VS Code, WebStorm, or Sublime Text, providing instant feedback and eliminating manual formatting work during development.

CI/CD pipeline validation: Add Prettier checks to your continuous integration pipeline to verify that all code is formatted correctly, failing builds when unformatted code is detected and maintaining consistency across all contributors.

Legacy codebase cleanup: Run Prettier across an entire legacy codebase to instantly standardize formatting, making the code more readable and establishing a foundation for consistent future contributions.

Multi-language monorepo formatting: Use Prettier in monorepos containing JavaScript, TypeScript, CSS, JSON, and Markdown files to maintain consistent formatting across all file types with a single tool and configuration.

Pros & Cons

Pros

+Eliminates all formatting debates and code review comments about style, saving significant team time
+Works seamlessly with ESLint through eslint-config-prettier, handling formatting while ESLint focuses on code quality
+Supports a wide range of languages and integrates with virtually every major editor and build tool
+Minimal configuration required with sensible defaults that work well for most projects
+Extremely fast formatting even on large codebases, with efficient caching mechanisms

Cons

−Intentionally limited configuration options mean you may not get exactly the formatting style you prefer
−Can produce less readable output in edge cases, particularly with deeply nested code or long chains
−Breaking changes in major versions occasionally require reformatting entire codebases
−Some language features or edge cases may not be handled optimally due to complexity of AST manipulation
−Adds an extra dependency and potential point of failure to your development workflow

Alternatives

eslintv10.0.0

An AST-based pattern checker for JavaScript.

toolchainastlint

79.4M / week

Comparisons

eslint vs prettier

toolchain

Install

bash

npm install prettier

bash

pnpm add prettier

bash

bun add prettier

Overview

Quick Start

typescript

// Install: npm install --save-dev prettier

// prettier.config.js
module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  printWidth: 80,
  arrowParens: 'avoid',
};

// format-code.js - Programmatic usage
import prettier from 'prettier';
import fs from 'fs/promises';

const sourceCode = `
const user={name:"John",age:30,email:"john@example.com"};
function greet(name){return "Hello, "+name+"!";}
const numbers=[1,2,3,4,5].map(n=>n*2).filter(n=>n>5);
`;

async function formatCode() {
  // Format code with inferred parser
  const formatted = await prettier.format(sourceCode, {
    parser: 'babel',
    semi: true,
    singleQuote: true,
  });

  console.log('Formatted code:');
  console.log(formatted);

  // Check if a file needs formatting
  const filePath = './src/app.js';
  const fileContent = await fs.readFile(filePath, 'utf8');
  const options = await prettier.resolveConfig(filePath);
  const isFormatted = await prettier.check(fileContent, {
    ...options,
    filepath: filePath,
  });

  if (!isFormatted) {
    const formatted = await prettier.format(fileContent, {
      ...options,
      filepath: filePath,
    });
    await fs.writeFile(filePath, formatted);
    console.log(`Formatted ${filePath}`);
  }
}

formatCode().catch(console.error);

Use Cases

Pros & Cons

Pros

+Eliminates all formatting debates and code review comments about style, saving significant team time
+Works seamlessly with ESLint through eslint-config-prettier, handling formatting while ESLint focuses on code quality
+Supports a wide range of languages and integrates with virtually every major editor and build tool
+Minimal configuration required with sensible defaults that work well for most projects
+Extremely fast formatting even on large codebases, with efficient caching mechanisms

Cons

−Intentionally limited configuration options mean you may not get exactly the formatting style you prefer
−Can produce less readable output in edge cases, particularly with deeply nested code or long chains
−Breaking changes in major versions occasionally require reformatting entire codebases
−Some language features or edge cases may not be handled optimally due to complexity of AST manipulation
−Adds an extra dependency and potential point of failure to your development workflow