Prettierについての最低限のメモ
この記事は
筆者はサイ本を通読してJavaScriptについてある程度理解しましたが、仕事で役立つ即効性のある知識は各ライブラリの理解であると考えました。
公式ドキュメントに目を通すとともに、必要になった時にすぐに該当のページへ辿り着けるように、個人用に書いています。
Prettierとは
Prettierとはコードフォーマッターで、JavaScript、TypeScript、React、HTML、CSSなどに対応している。この世界においてはちょっとしたコーディングのスタイルの違いで不毛な議論が多くの時間を浪費させているわけだが、Prettierがあれば解決。後方互換性などの特殊な事情を除いてオプションは最小限にしている。しのごの言わずPrettierに従っておけという方針。
現在のデフォルトがなぜそのようになっているかはRationaleを参照
以下では、公式ドキュメントを参照して、特に重要と思われる部分を抜粋したり、メモを追記したりしている。eslintとの共存方法やTypeScript用の設定などは別の記事で書くとして、Prettierの基本的な内容を本項では記していきたい。
セットアップ
$ yarn init -y
# --exactはバージョンを厳密に指定
$ yarn add --dev --exact prettier
$ echo {}> .prettierrc.json
実行
# フォーマット結果を上書きして反映する
$ yarn prittier --write .
- 実際にはエディターの拡張機能を使うことが多い
その他の CLI オプション
-
--check
: ファイルを変更しない。フォーマットできてないファイルがあるときは exit 1 になるので CI でも使える。 -
--debug-check
: コード変更の可能性を prettier が教えてくれる -
--config
: config ファイルの指定。デフォルト.prettierrc.json
-
--no-config
: config ファイルがない -
--ignore-path
: prettierignore ファイルの指定。デフォルト.prettierignore.json
-
--list-different
: 不適合ファイルのリストを表示 -
--config-precedence
: cli コマンドと設定ファイルどちらを優先するかcli-override
file-override
prefer-override
-
--with-node-modules
:node_modules
も含むかどうか -
--ignore-unknown
: パターンマッチした未知のファイルを無視
詳しくは公式ドキュメントへ
いろいろなオプションが選択できるが、CLIのオプションで指定するよりも、設定ファイルに書いてプロジェクトにcommitするのが良い。
Git hooks
以下のコマンドを実行
# husky: githooksを扱うnpmライブラリ
# lint-staged: stagingされたコードにlintを実行するためのライブラリ
$ yarn add --dev husky lint-staged
$ npx husky install # .huskyディレクトリが作られる
$ npm set-script prepare "husky install" # package.jsonにnpmスクリプトが追加される
$ npx husky add .husky/pre-commit "npx lint-staged" # huskyにpre-commitが追加される
packge.json に追加
以下の pakcage.json の lint-staged のところ
{
"name": "prettier_test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"husky": "^7.0.4",
"lint-staged": "^12.3.4",
"prettier": "2.5.1"
},
"scripts": {
"prepare": "husky install"
},
+ "lint-staged": {
+ "**/*": "prettier --write --ignore-unknown"
+ }
}
vscodeとの統合
公式のリポジトリのREADMEを参照
保存時にPrettierが走るようにする
とはいえ、一番やりたいのはFormatOnSaveだと思う。以下のように行う。
vscode上でCommand + P
を押してから
ext install esbenp.prettier-vscode
.vscode/settings.json
を作成して、以下を記述する。
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.formatOnSave": true
},
}
prettierの対象外にする
設定ファイル
$ echo -e "# Ignore artifacts:\nbuild\ncoverage" > .prettierignore
インラインコメント
// prettier-ignore
CLI
$ prettier --write . '!**/*.{js,jsx,vue}'
設定ファイル
以下の優先順位で認識される。
package.jsonの"prettier"キー
.prettierrc
-
.prettierrc.json
or.prettierrc.yaml
-
.prettierrc.js
or.prettierrc.cjs
orprettier.config.js
.prettierrc.toml
関連プロジェクト
eslint-config-prettier
prettierと競合するeslintのルールを無効にする
eslint-config-prettier
eslint-plugin-prettier
eslint-plugin-prettierはESLintのルールとしてPrettierを実行し、
その違いを個別のESLint問題として報告する。
eslint-plugin-prettier
Discussion