TL;DR
「意見を持った（opinionated）」コードフォーマッタ。JavaScript、HTML、CSS、Markdown、GraphQL、YAML などに対応している。
Prettier is an opinionated code formatter
なぜ必要か
コードの可読性を上げ、コードスタイルの一貫性を保てる。
仕組み
意見を持ったフォーマッタなので、設定オプションはわずかしかない。ここが ESLint との大きな違いである。デフォルト値が決まっているので、オプションを指定しなくても使える。
npm install --save-dev prettier でインストールし、必要なら .prettierrc でオプションを指定する。除外したいディレクトリは .prettierignore に書く。
例
.prettierrc の例。
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"tabWidth": 2,
"semi": true
}npx prettier index.js で整形結果を表示し、--write を付けるとファイルを書き換える。package.json の scripts に追加すると、CI で使いやすい。
{
"scripts": {
"test": "jest",
"lint": "eslint . && prettier --list-different .",
"format": "eslint --fix && prettier --loglevel warn --write ."
}
}--list-different は、フォーマットに問題があるファイルの名前を一覧にする。--log-level warn は、問題が起きたときだけ出力する。どちらも ESLint の動作に合わせるためのものである。
Visual Studio Code では拡張機能を入れ、保存時に整形されるよう editor.formatOnSave を true にするとよい。editor.formatOnType を true にすると、入力中にも整形される。
{
"editor.formatOnSave": true
}注意点
オプションを指定しない場合でも、Prettier を使っていることが分かるように、空の .prettierrc（{}）を作っておくとよい。