More than 1 year has passed since last update.

ESLintとPrettierとhuskyを導入する（2021年4月版）

Last updated at 2022-06-22Posted at 2021-04-16

これは何

フォーマッター類の設定方法をまとめた記事です
- ネットでよく解説されている方法が2018~2019年頃の設定が多い気がしたため、最近の内容にあわせて記事を書きます
- 将来的にこの記事の内容も役に立たなくなりそうな気がするのでタイトルに2021年と入れておきました
なぜフォーマッターが必要か？といった内容は扱いません

eslint-plugin-prettierは使わない
- eslint-config-prettierをESLintのextendsに適用して、Prettierと競合しないようにする
- lintはlint、formatはformat、それぞれ個別に動かす
古い解説記事から設定ファイルをコピペするよりyarn run eslint --initした方が確実

今までは、これらのプラグインorツールを導入してルールの競合を回避していました。

しかし現在ではこれらの方法は明確に非推奨とされています。
（Prettier公式がプラグイン使用について言及しています）

ではどうするかというと、以下のような流れです。
（コマンド類は簡略化しています）

インストール時

npm install --save-dev eslint-config-prettier

.eslintrc.js

  extends: [
    ...
+   'prettier',
  ],
// ※他の設定を上書きするために、最後の行に記載する必要がある

コマンドを叩く

npm run prettier --write . && npm run eslint --fix .

ツールで自動で連携させるのではなく、ユーザーが自分で設定するような方向性になりました。

色々な解説記事でESLintの設定ファイルが公開されていますが、それらをコピペしても微妙に上手く動かないことも多いです。

そもそも設定ファイルを.eslintrcにするのか.eslintrc.jsにするのかや、TypeScriptを使うかどうかなどで記述も変わってくるため、自分のプロジェクトにあった内容に適宜置き換えながらコピペしないといけません。

なんだかんだ煩わしいため、今から新しくESLintを入れるならnpm install eslint --save-devのあとにこのコマンドを実行した方が良いと思います。

セットアップ用のコマンド

npx eslint --init

これを実行するといくつか質問されます。
自分のプロジェクトの内容にあわせてYES/NOなどを選んでいけば、それだけでちゃんと動く設定ファイルが出来上がります。

今まではpackage.jsonにこのような記述をして、commit時にhook→コマンド実行をしていたと思います。

package.json

"lint-staged": {
  "*.js": ["eslint", "prettier --write"]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

しかし最新バージョンであるv6ではこの書き方は動作しません。

もし新しくプロジェクトを始める段階なら心配ご無用です。

npx husky-init && npm install

このコマンドを実行すれば、以下が一気に行われます。

あとはnpm testを好きなコマンドに書き換えればOKです。
lint-stagedと併用するなら以下のようなイメージです。

package.json

"scripts": {
  ...
  "lint-staged": "lint-staged"
},
"lint-staged": {
  "*.js": ["eslint", "prettier --write"]
}

pre-commit

- npm test
+ npm run lint-staged

既にhuskyがインストールされている場合はhusky-4-to-6というドキュメントが用意されているので、こちらに沿って進めます。

といってもおそらく大半の場合は、以下のコマンドを叩いて

husky-4-to-6

npm install husky@6 --save-dev && npx husky-init && npm exec -- github:typicode/husky-4-to-6 --remove-v4-config

package.jsonに書かれていたpre-commitのコマンドを.husky/pre-commitへ移すだけです。

もしpackage.jsonに書かれているコマンドがローカルにインストールしたバイナリを直接呼び出していた場合はnpx経由で呼び出す必要があるので.husky/pre-commitの記載が以下のような形式になります。

.husky/pre-commit

npx --no-install jest
yarn jest