Zenn
🏃

pnpm開発環境でコミット前にlinterとformatterのチェックが走るようにする+α

2023/11/30に公開
Git
ESLint
Prettier
#
husky
pnpm
tech

はじめに

この記事は、huskyを使用してコミット前にlinterやformatterが走るようになる環境を整えるまでの手順を個人的な備忘録としてまとめたものです。
コミットの前にlinterやformatterを通すことでいわゆる汚いコードを弾くことができ、レポジトリのコードの品質維持に役立ちます。

huskyやlint-staged、prettierその他のアップデートおよび仕様変更によって将来的にこの手順が使用できなくなる可能性があります。(記.2023/11/30)

前提条件

環境構築

  1. 以下のコマンドを実行し、必要なパッケージをインストール
pnpm install -D husky lint-staged prettier @trivago/prettier-plugin-sort-imports
  1. 以下のコマンドを実行し、huskyをセットアップ
pnpm dlx husky-init
  1. package.jsonの"scripts"に以下の3行を追加
package.json
{
  // ...略...
  "scripts": {
    // ...略...
    "lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
    "fmt": "prettier --write **/*.{js,jsx,ts,tsx,css,scss}",
    "fmt:warn": "prettier --l **/*.{js,jsx,ts,tsx,css,scss}"
  }
  // ...略...
}
  1. package.jsonに"lint-staged"の設定を追加
package.json
{
　"name": "hogehoge",
  "version": "1.0.0",
  // ...略...
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "pnpm run lint"
  },
  // ...略...
}
  1. .prettierrc.jsonを作成し、prettierの設定を追加
    下の例ではシングルクォート使用、文末にセミコロン、インデント2マス、配列などの最後の要素にカンマを付ける、波カッコの前にスペースを空けるという設定をしています。
    importOrder...以下の設定は各ファイルのimportをソートする際の優先度設定になります。環境に応じて適宜変更してください。
    設定できる項目の一覧はここから確認できます。
.prettierrc.json
{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "^types$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/components/(.*)$",
    "^@/hooks/(.*)$",
    "^@/styles/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": false,
  "importOrderSortSpecifiers": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}
  1. 以下のコマンドを実行し、huskyにコミット前にチェックするコマンドを設定
pnpm dlx husky set .husky/pre-commit "pnpm dlx lint-staged"
pnpm dlx husky add .husky/pre-commit "pnpm run fmt:warn"

以上でコミット前にlinterとformatterのチェックが走るようになります。実際にコミットしてみて意図した通りに止められたり通ったりすることを確認してください。ちゃんと動いていれば環境構築は終了です。お疲れ様でした。

linterとformatterのコマンドの使い方

ここまでの環境構築でpackage.json内に諸々の設定を行ったため、以下のpnpmコマンドでlinterとformatterを使うことができます。

  • pnpm run lint
    ESLintが走り、コードにおかしな部分があれば警告してくれます。
  • pnpm run fmt
    prettierが走り、コードにフォーマットから外れている部分があれば自動で修正してくれます。コミットでprettierに弾かれた時はこのコマンドを実行すれば通るようになるはずです。
  • pnpm run fmt:warn
    prettierが走り、コードにフォーマットから外れている部分があれば警告してくれます。

おまけ: プッシュ前にbuildが通るかのチェックが走るようにする

pre-commitでコミット前のチェックの設定を行ったように、pre-pushでプッシュ前のチェックの設定を行うことができます。
以下のコマンドを実行するだけでプッシュ前にbuildを試行し、失敗するとプッシュを取りやめて警告してくれるようになります。

pnpm dlx husky set .husky/pre-push "pnpm run build"

Discussion