Prettier

Overview

Prettier is an opinionated code formatter designed to ensure a consistent code style across projects and development teams. It operates by parsing code into an Abstract Syntax Tree (AST) and then reprinting it according to its predefined rules, rather than merely linting issues or suggesting style changes. This approach ensures that all code processed by Prettier adheres to the same formatting, regardless of the original author or editor used.

The primary goal of Prettier is to eliminate discussions and disagreements over code style during code reviews, often referred to as "bikeshedding." By automating formatting, developers can focus on the logic and functionality of the code rather than its superficial appearance. This can lead to more efficient code reviews and a reduction in cognitive load for developers transitioning between different parts of a codebase or working on multiple projects.

Prettier supports a wide array of programming languages, including JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML, and more. Its flexibility in supporting various syntaxes makes it a tool for polyglot development environments. Integration is provided for popular code editors like VS Code, Sublime Text, Atom, and Vim, allowing for automatic formatting on save or on demand. It also integrates with version control systems via pre-commit hooks and build pipelines, ensuring that all committed code conforms to the defined style.

While Prettier offers some configuration options, such as tab width or single quotes, it intentionally limits these choices. This "opinionated" nature is central to its design philosophy: by having fewer configurable options, it reduces the potential for teams to create complex, divergent style guides, thereby maximizing consistency. This approach contrasts with tools that provide extensive customization, such as ESLint's configuration options, which allow for granular control over many stylistic rules but require more team consensus to define and maintain.

Prettier is particularly well-suited for large teams where maintaining a uniform code style can be challenging, or for open-source projects with many contributors. It also benefits individual developers by automating a mundane task, allowing them to concentrate on development. The tool's rapid adoption since its founding in 2017 indicates a community demand for automated, consistent code formatting solutions.

Key features

• Opinionated Formatting: Enforces a consistent code style with minimal configuration, reducing style debates within teams.
• Broad Language Support: Supports JavaScript, TypeScript, HTML, CSS, SCSS, JSON, Markdown, YAML, GraphQL, and more, making it versatile for diverse projects.
• Editor Integrations: Provides plugins for popular code editors (e.g., VS Code, Sublime Text, Atom) to format code automatically on save or via hotkeys.
• CLI Tool: Offers a command-line interface for formatting files or entire projects, suitable for CI/CD pipelines and pre-commit hooks.
• Print Width Control: Allows setting a maximum line length, rewrapping code that exceeds it to improve readability.
• Pre-commit Hooks: Can be integrated with tools like Husky to automatically format code before commits, ensuring all submitted code adheres to style guidelines.
• Minimal Configuration: Limits customization options to promote consistency and reduce setup overhead compared to highly configurable linters.
• AST-based Formatting: Parses code into an Abstract Syntax Tree (AST) and then re-prints it, ensuring structural correctness and consistent output.

Pricing

Prettier is an open-source tool released under the MIT License. It is free to use for both personal and commercial projects.

Pricing as of 2026-05-07. For details, refer to the Prettier homepage.

Common integrations

• ESLint: Prettier can run alongside ESLint. ESLint handles code quality and potential errors, while Prettier manages code style. The official Prettier documentation on ESLint integration explains how to configure them to work together without conflicts.
• VS Code: The Prettier extension for VS Code allows for automatic formatting on save, format-on-paste, and manual formatting commands.
• Git Hooks (e.g., Husky): Used to run Prettier automatically on staged files before a commit, ensuring that only formatted code enters the repository. The Prettier pre-commit hook documentation provides setup instructions.
• Vite: Can be integrated into Vite-based projects to ensure consistent formatting during development. Developers can add Prettier as a dev dependency and configure scripts for formatting specific file types, as shown in Vite's documentation on code linting and formatting.
• SvelteKit: Integrates with SvelteKit projects to maintain code style for .svelte files, JavaScript, and CSS within the framework. The SvelteKit documentation references formatting setup.
• Next.js: Prettier can be set up in Next.js applications to format JavaScript/TypeScript, JSX, CSS, and other files. The Next.js ESLint configuration guide often includes steps to integrate Prettier.

Alternatives

• ESLint: A pluggable JavaScript linter that can identify and report on problematic patterns found in JavaScript code, including style issues, but is more configurable than Prettier.
• Black: An opinionated code formatter for Python, similar in philosophy to Prettier by offering minimal configuration.
• Biome: A linter, formatter, and bundler for web projects, aiming to provide an all-in-one toolchain for JavaScript, TypeScript, and JSON.

Getting started

To get started with Prettier, install it as a development dependency in your project and configure a script to run it. This example demonstrates basic setup for a JavaScript project.

# Install Prettier as a dev dependency
npm install --save-dev prettier

# Or using Yarn
yarn add --dev prettier

# Create a sample JavaScript file
echo 'const   myVar  =  "hello"  ; console.log(  myVar  )  ;' > test.js

# Format the file using the CLI
npx prettier --write test.js

# Check the formatted file
cat test.js
# Expected output: const myVar = "hello";
# console.log(myVar);

# Add a script to your package.json for easier use
{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "format": "prettier --write ."
  },
  "devDependencies": {
    "prettier": "^3.0.0"
  }
}

# Run the format script to format all supported files in the project
npm run format