Prettier

Installation

# npm
npm install --save-dev prettier

# yarn
yarn add --dev prettier

# pnpm
pnpm add --save-dev prettier

# global installation
npm install -g prettier

CLI Commands

# format a file
prettier --write src/index.js

# format all files in a directory
prettier --write src/

# format specific file types
prettier --write "**/*.{js,jsx,ts,tsx,json,css,md}"

# check if files are formatted (CI)
prettier --check .

# output formatted file to stdout
prettier src/index.js

# show diff without writing
prettier --write --list-different src/

Configuration File

// .prettierrc or .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always"
}

// prettier.config.js or .prettierrc.js
module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  useTabs: false,
  trailingComma: 'es5',
  printWidth: 80,
  bracketSpacing: true,
  arrowParens: 'always',
};

Common Options

{
  // print semicolons at end of statements
  "semi": true,

  // use single quotes instead of double
  "singleQuote": true,

  // spaces per indentation level
  "tabWidth": 2,

  // use tabs instead of spaces
  "useTabs": false,

  // trailing commas: "none", "es5", "all"
  "trailingComma": "es5",

  // line width before wrapping
  "printWidth": 80,

  // spaces inside object braces { foo: bar }
  "bracketSpacing": true,

  // arrow function parens: "always", "avoid"
  "arrowParens": "always",

  // line endings: "lf", "crlf", "cr", "auto"
  "endOfLine": "lf",

  // quote props: "as-needed", "consistent", "preserve"
  "quoteProps": "as-needed",

  // use single quotes in JSX
  "jsxSingleQuote": false,

  // put > on last line: true, false
  "bracketSameLine": false,

  // format embedded code in markdown
  "embeddedLanguageFormatting": "auto"
}

Ignore Files

# .prettierignore
node_modules/
dist/
build/
coverage/
*.min.js
package-lock.json
yarn.lock
pnpm-lock.yaml

Ignore Code

// prettier-ignore
const matrix = [
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
];

// prettier-ignore-start
const ugly    =    code;
const stays   =    unformatted;
// prettier-ignore-end

<!-- prettier-ignore -->
<div   class="ugly"   >stays unformatted</div>

<!-- prettier-ignore-start -->
<div   class="ugly"   >
  stays    unformatted
</div>
<!-- prettier-ignore-end -->

/* prettier-ignore */
.ugly    {    color:   red;    }

Editor Integration

// VS Code settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

ESLint Integration

# install eslint-config-prettier
npm install --save-dev eslint-config-prettier

// .eslintrc.json - add "prettier" last in extends
{
  "extends": ["eslint:recommended", "prettier"]
}

Pre-commit Hook

# install husky and lint-staged
npm install --save-dev husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": "prettier --write"
  }
}

Override Per File Type

// .prettierrc
{
  "semi": true,
  "overrides": [
    {
      "files": "*.md",
      "options": {
        "tabWidth": 4
      }
    },
    {
      "files": ["*.json", ".prettierrc"],
      "options": {
        "tabWidth": 2
      }
    },
    {
      "files": "*.yaml",
      "options": {
        "tabWidth": 2,
        "singleQuote": false
      }
    }
  ]
}