【lint-staged】GitでIndexに登録したファイルだけLintチェックを行う

lint-stagedとは

リポジトリはokonet/lint-stagedです。Indexへ登録したファイル(Commitして取り込む前の状態)のファイルだけにLintタスクを実行することができます。

設定ファイルを書く

設定ファイルを書くことで、「*.cssにはCSSのLint*.jsへはJSのLintを実行」と設定することができます。書き方は 対象ファイルのワイルドカードのプロパティに、npm run-scriptのScript名を書くだけです。また、複数のことをやらせたい場合は、値を配列にして羅列することもできます。

確認用ファイルを作る

とりあえず今回は、sindresorhus/xoというハピネスなJavascript用Linterを使いたいと思います。

npm i -D lint-staged xo

まず、package.jsonscriptsにこのLintを実行するScriptとlint-stagedを実行するScriptを追加します。

"scripts": {
  "lint:js": "xo",
  "lint-staged": "lint-staged"
}

これで、npm run lint:jsでLintを実行できるようになりました。次に.lintstagedrcを編集します。

{
  "*.js": "lint:js"
}

そして、あえてLintに引っかかるファイルを作成します。ファイル名はなんでも良いので、ここではincorrect.jsとします。

const foo = 'foo';

上記のJavaScriptは「fooを定義してるけど使ってないぜ(no-unused-vars)😎」と警告してくれるはずです。

lint-stagedる

ではさっそく実行してみます。

npm run lint-staged
# > @ lint-staged /Users/nju33/test/lint-staged
# > lint-staged

ですが、これは何も警告されないまま終わってしまいます。上記で述べたようにIndexへ登録する必要がありました。

git add incorrect.js

そして再度 lint-staged してみると、今度はちゃんとLintしてくれました。

npm run lint-staged
# > @ lint-staged /Users/nju33/test/lint-staged
# > lint-staged
#
# ❯ Running tasks for *.js
#     1 error
#   ✖ lint:js
#       1 error
#
# 🚫  lint:js found some errors. Please fix them and try committing again.
#
#  incorrect.js
#    1:7  a is assigned a value but never used.  no-unused-vars
#
#  1 error

Commitする時にLintに引っかかるようだったらCommitをキャンセルする

まず、typicode/huskyをインストールします。これはGitコマンドのHookをrun-scriptに設定できるようにするパッケージです。Hookできるコマンド一覧を参考にしてください。

npm i -D husky

package.jsonscriptprecommitScriptを追加します。

"scripts": {
  "precommit": "npm run lint-staged",
  "lint:js": "xo",
  "lint-staged": "lint-staged"
}

そして、Commitしてみると、「precommitがfailedしたぜ😎」と言われました。git statusで確認したもまだ残ってることも確認できます。

git commit -m 💮
# > husky - npm run -s precommit
#
# ❯ Running tasks for *.js
#     1 error
# ...
#
# > husky - pre-commit hook failed (add --no-verify to bypass)
git status -s
# A  incorrect.js

incorrect.jsを修正して再Commit

Commitしたいのでincorrect.jsをLintに引っかからないようにします。

const foo = 'foo';
console.log(foo);

そしてgit addして再度git commitします。

git ccommit -m 💮
# > husky - npm run -s precommit
#
# ✔ Running tasks for *.js
# [master (root-commit) 426f40b] 💮

今度は通りました。

ちなみに、この今回の例は、javascript-nju33-work-examples/lint-only-indexed-filesに置いてます。