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}'

設定ファイル

cosmiconfig準拠

以下の優先順位で認識される。

1. package.jsonの"prettier"キー
2. .prettierrc
3. .prettierrc.json or .prettierrc.yaml
4. .prettierrc.js or .prettierrc.cjs or prettier.config.js
5. .prettierrc.toml

関連プロジェクト

eslint-config-prettier

prettierと競合するeslintのルールを無効にする
eslint-config-prettier

eslint-plugin-prettier

eslint-plugin-prettierはESLintのルールとしてPrettierを実行し、
その違いを個別のESLint問題として報告する。
eslint-plugin-prettier