Prettier

Overview

Prettier is an opinionated code formatter.

• Homepage
• Online playground

Install

1. Install latest Prettier.

npm install --save-dev --save-exact prettier

1. Add .prettierignore. Prettier will follow rules in .gitignore

# Ignore artifacts:
build
coverage

Usage

• To check all files:

npx prettier . --check

• To format all files:

npx prettier . --write

Configuration

Prettier will search for a configuration file in the following order:

• prettier key in your package.json file.
• .prettierrc file written in JSON or YAML.
• .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
• .prettierrc.js, or prettier.config.js file that exports an object using export default or module.exports (depends on the type value in your package.json).
• .prettierrc.mjs, or prettier.config.mjs file that exports an object using export default.
• .prettierrc.cjs, or prettier.config.cjs file that exports an object using module.exports.
• .prettierrc.toml file.

Many values will inherit from .editorconfig, if it exists.

Ignoring code

• Use globs in .prettierignore

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
**/*.html

• Using the CLI

prettier . "!**/*.{js,jsx,vue}" --write

• Use comments in JavaScript

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

• Use comments in JSX

<div>
  {/* prettier-ignore */}
  <span     ugly  format=''   />
</div>

• Use comments in HTML

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

• Use comments in CSS

/* prettier-ignore */
.my    ugly rule
{

}

• Use comments in Markdown

<!-- prettier-ignore -->
Do   not    format   this

• Use comments in YAML

# prettier-ignore
key  : value
hello: world

VSCode

• esbenp.prettier-vscode

{
  "prettier.prettierPath": "./node_modules/prettier",
  "prettier.enable": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}