Nuxt.jsにてcommit時に自動でESLintを実行させる方法

概要

ポートフォリオでフロントエンドの開発をしている際、
pushする前に都度Lintツールを実行するのが面倒なのでcommit時に自動で動作するようにしてみました。

環境

/	バーション
nuxt	2.15.8
yarn	1.22.15
husky	7.0.4

前提

まず、LintツールであるESLintは設定済みと仮定します。
説明のためpackage.jsonの一部の例だけ載せておきます。

package.json

 "scripts": {
   "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
   "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
 },

方法

Step 1 ライブラリのインストール

まず、huskyをインストールします。

yarn add --dev husky

Step 2 Git hooksの有効化

下記コマンドにてGit hooksを有効にします。

yarn husky install

Step 3 package.jsonを編集

package.jsonのscriptを下記のように編集します。

package.json

"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
  "prepare": "husky install",  // 追加
},

Step 4 .husky/pre-commitを作成する

.huskyディレクトリを作成し、そのディレクトリ内にpre-commitファイルを作成する。
この作成したファイルにcommit時に実行するコマンドが記載される。

Step 5 pre-commitにコマンドを追加

下記コマンドを実行してpre-commitファイルにコマンドを追加する。

yarn husky add .husky/pre-commit "lintfix"

今回はESLintを自動で実行したいので、上記コマンドを登録してる。
もし他の実行したいコマンドがあれば同様に登録すればよい。

まとめ

上記手順でESLintは自動で実行される。詳しく知りたい場合はドキュメントを参照してください。