husky&lint-stagedでcommit時に自動でlinterを通す

概要

• りあクト！という本で学んだことでコミット時に自動でLintを走らせる内容があった
• この時インストールしているhuskyとlint-stagedについて調べたことをまとめる

参考資料：Husky (v5) と lint-staged を使ってコミットする前に Prettier を実行する

huskyとは

• Gitのhookを管理するツール
• npmのパッケージ
• バージョン管理している場合に、コミットやプッシュを行うときに任意のコマンドを挟むことができる
• Lintツールなどと併用して使うことで有用性が高まる

lint-stagedとは

• Gitにステージされているファイルに指定したスクリプトを実行するツール
• Lintをすべてに通すのではなく、差分に対してのみ通すことで効率化できる

導入の流れ

1. パッケージのインストール

yarn add -D husky lint-staged

2. package.jsonに設定

     "devDependencies": {
      ︙
      "stylelint": "^13.8.0",
      "stylelint-config-recess-order": "^2.3.0",
      "stylelint-config-standard": "^20.0.0",
      "stylelint-order": "^4.1.0"
    },
+   "husky": {
+     "hooks": {
+       "pre-commit": "lint-staged"
+     }
+   },
+   "lint-staged": {
+     "src/**/*.{js,jsx,ts,tsx}": [
+       "prettier --write --loglevel=warn",
+       "eslint --fix"
+     ],
+     "src/**/*.css": [
+       "stylelint --fix"
+     ],
+     "src/**/*.{gql,graphql,json}": [
+       "prettier --write --loglevel=warn"
+     ]
+   }
  }

まとめ

• commitしたときに自動でLintが走るだけでなく、開発時の差分に対してのみLintが走るようにできるがいいと思った