Prettier

Prettier

  • Playground
  • About
  • Usage
  • Blog
  • GitHub
Try It Out
Get Started
Options

What is Prettier?

  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options

Why?

  • You press save and code is formatted
  • No need to discuss style in code review
  • Saves you time and energy
  • And more

Works with the Tools You Use

ES2017

JSX

Flow

TypeScript

JSON

HTML5

Vue

Angular

CSS3+

Less

SCSS

styled-components 💅

styled-jsx

GraphQL

GraphQL Schemas

CommonMark

GitHub Flavored Markdown

MDX

YAML

Work in Progress

Elm (via elm-format)

Java

PHP

PostgreSQL

Python

Ruby

Swift

Editor Support

Atom

prettier-atom
mprettier
miniprettier

Emacs

prettier-emacs

Espresso

espresso-prettier

Sublime Text

JsPrettier

Vim

neoformat
ale
vim-prettier

Visual Studio

JavaScriptPrettier

VS Code

prettier-vscode
unibeautify-vscode

WebStorm

Built-in support

Got more? Send a PR

Get Started

  1. Add prettier to your project:
    yarn add prettier --dev --exact
    
    npm install prettier --save-dev --save-exact
    
  2. Verify by running against a file:
    yarn prettier --write src/index.js
    
    npx prettier --write src/index.js
    
  3. Run prettier when commiting files:
    yarn add pretty-quick husky --dev
    
    npm install pretty-quick husky --save-dev
    
    Then add this config to package.json:
    {
      "husky": {
        "hooks": {
          "pre-commit": "pretty-quick --staged"
        }
      }
    }
    
yarnnpm

Used By People You Rely On

See All OthersAdd Your Project

Established in the Ecosystem

More than 1250 tools and integrations on npm

Install Them

More than 250,000 dependent repositories on GitHub

Check Them Out
Prettier
Docs
AboutUsage
Community
User ShowcaseStack OverflowChat on Gitter@PrettierCode on TwitterFollow Prettier on Twitter
More
BlogGitHubIssuesStar