Skip to content

husky + lint-staged で快適 lint 生活

  • JavaScript
  • Git

📅 2021-01-12

⏱️ 3 min read

前提

この記事は下記の前提で進めていく。

  • フロントエンドの環境を構築済み
  • eslint or prettier などのコード整形もしくは文法や型のチェックを実行している
  • CI でリモートだと仕組み化できているがローカルに導入していない

環境

$ sw_vers
ProductName:	macOS
ProductVersion:	11.0.1
BuildVersion:	20B50

$ node --version
v10.17.0

$ yarn --version
1.22.4

プラグインのインストール

今回は husky と lint-staged と言うプラグインを使う。

$ yarn add -D lint-staged husky

プラグインの役割

簡単に説明しておくとそれぞれ下記の役割を担う。

  • husky

    • Git Hook を楽に扱うことのできるツール

  • lint-staged

    • Git 管理下の Staged されたファイルに任意の処理をすることができるツール

これらを組み合わせて Staged された即ち commit しようとしているファイルにのみ Lint 処理を Hook させると言うことを仕組み化していく。

package.json の修正

下記を追加する。

// 省略

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts}": [  //lintかけたいファイルを指定
      "eslint --fix"
    ]
  }

やってみる

git commit を実行すると下記のようになった。 Staged された test.js に pre-commit hook ができているのが分かる。

$ git status
On branch feature/test
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        modified:   src/test.js

$ git commit -m 'Test commit'
husky > pre-commit (node v10.17.0)
✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
[feature/test ab0cd12] Test commit
 1 files changed, 2 insertions(+), 1 deletions(-)
 create mode 100644 src/test.js

まとめ

これまでも CI でコード整形や構文チェックなどは自動化していたが PR を作成し、ビルドを待つという時間が無駄だと感じて導入してみることにした。また、commit も無駄にできてしまうということも防ぐことができるのではないだろうか。

pre-commit というと Git 管理されていないこともあり開発者によっては設定を忘れているケースもあると思うが、これだと package.json で完結していてそのようなデメリットもないのでいい感じだ。

← PrevNext →
  • © ysmtegsr 2019 - 2021