メインコンテンツまでスキップ

Prettier

link: https://prettier.io/

コードフォーマッター（ソースコードを整形してくれるツール）のこと。読み方はプリティア。

何故コードフォーマッタを利用するのか（コードを整形するのか）​

  1. ソースコードの品質を保つため（コードのスタイルの一貫性を保つため）

  2. コードレビュー時に、設計や命名などの重要な箇所に集中するため（コードのスタイルの指摘に時間を割くのを防ぐため）

  3. 複数のメンバーが各自の整形ルールを適用し、更新する度に余計な差分が発生することを防ぐため

  4. ソースコードを綺麗にするための労力（スタイル定義の議論や時間）を費やさなくて済むため

  5. ツールに任せられることはツールに任せてしまった方が今後楽になるため

Installation​

npm install --save-dev prettier @trivago/prettier-plugin-sort-imports

Configuration​

ヒント

import 順序にも対応した例

.prettierrc
{
  "singleQuote": true,
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^@docusaurus/(.*)$",
    "^@site/(.*)$",
    "^[./]"
  ],
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

自動設定（husky lint-staged）​

自動で pre-commit にフックして整形を行うための設定を行う。

npm install --save-dev husky lint-staged
  • husky（Git のコミット時やプッシュ時に指定したコマンドを実行できる）
  • lint-staged（Git のステージングに追加されたファイルにのみに ESLint などのリントを実行できる）

以下のコマンドで husky を初期化

npx husky init

pre-commit フックをlint-stagedに書き換え

.husky/pre-commit
- npm test
+ npx lint-staged

package.json に lint-staged の設定を追加

ヒント

stylelint や eslint の設定付きの例

package.json
{
  "lint-staged": {
    "*.{js,css,md,ts,tsx,json,scss}": "prettier --write",
    "*.{scss}": "stylelint --fix",
    "*.{js,ts,tsx}": ["eslint --fix --max-warnings 0 --debug"]
  }
}
危険

コード規約違反がある場合はコミットできません