f:id:kic-yuuki:20190527090446p:plain

eslintの設定をしたけど、eslintの警告やエラーを無視したままコミットしてしまった...ということがありました。

できれば、git add 〜→git commit 〜する際にeslintによるチェックをかけて、commitできないようにしておきたい...

と思っていたら、実際にできましたので、その手順をメモしておきます。

この記事はなに？ 🤔

この記事は、lint-stagedとhuskyを使い、git commitのタイミングでeslintによるチェックを実施し、エラーだったらコミットさせない設定をした際の手順を記載します。

以下参考文献になります。

環境

環境は以下になります。

macOS Mojave
Node.js 12.2.0
yarn

仕組み

参考記事等から、ざっくり以下のような仕組みであると解釈しました。

git commit時に発生するGitフック「pre-commit」をhuskyでハンドリング
~~lint-stagedで実行したいlint系コマンドを実施する~~
lint-stagedでGitのステージに上がっているファイルを対象にeslint等のコマンドを実行できる

Gitフックについては、以下の記事をご参照ください。🙏

Git - Git フック

手順

下記のリポジトリ（コミット履歴）を元に手順を記載していきます。結構簡単です。

lint-staged / husky導入時のコミット

必要なプラグインの導入

yarn add -Dで、必要なnpmモジュールを導入していきます。

# 必要なプラグインの導入
yarn add -D eslint lint-staged husky

package.jsonの設定

lint-stagedのREADME上記記載を元に、package.jsonへ以下を追記します。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "*.js": [
        "eslint --fix",
        "git add"
      ]
    },
    "ignore": [
      "dist/**/*"
    ]
  }
}

lintersには、eslint対象のファイル拡張子とeslint --fix/git addのコマンドを記載します。

ignoreはlint-stagedに記載したeslint --fixから対象外とするパス、ファイルを記載します。

これだけで設定完了となります。

テスト

実際にチェックがかかるかテストしてみます。

src/index.js対して、console.logを追記し、no-consoleのeslintエラーが発生する状態でコミットしてみます。

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

        modified:   src/index.js

$ git commit -m "test"
husky > pre-commit (node v12.2.0)
  ↓ Stashing changes... [skipped]
    → No partially staged files found...
  ❯ Running linters...
    ❯ Running tasks for *.js
      ✖ eslint --fix
        git add



✖ eslint --fix found some errors. Please fix them and try committing again.

/Users/yazakiyuuki/work/webpack-practice/webpack-crash-course/src/index.js
13:1  error  Unexpected console statement  no-console

✖ 1 problem (1 error, 0 warnings)


husky > pre-commit hook failed (add --no-verify to bypass)
$ git status
On branch test
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        modified:   src/index.js

$

このように、eslintのチェックが走り、git commitできないことが確認できました。

おわり

間違い、誤記等などありましたら、FBいただけると助かります！🙇‍♂️

参考文献

参考文献のまとめです。