ESLintが妙に遅いとき、不要なファイルを読んでないか確認して除外しよう。

ここまでのあらすじ：ESLint は便利。でも実行すると妙に遅い？　CI の実行時間には問題なく、VS Code のプラグインもストレスなく動く。でも手元のコンソールから実行するととても遅い……というか一生終わらない。どうして？　どこかで詰まっている？　なにが？

先にまとめ

ビルドファイルなんかが対象になってるかも
DEBUG=eslint:* eslint . で実行し、詳細出力
目的でないファイルが含まれていないか確認
ignorePatterns へ追加して除外

なんか遅い……

あるとき大きめの自動変更をしました。

目視確認の前に機械的に判断できるものは判断してしまおうとコンソールから ESLint を実行したところ……終わらない。ESLint のエラーは VS Code 上ではちゃんと出てくるし、CI もご機嫌に回っているので特に気にしていなかったんですが、どこかに何か問題があるようです。

実はこのとき「なんかいらんファイル読みに行ってそうだな」という予感はしていました。たぶん過去にそういう失敗をしたんだろうと思います、具体的には思い出せないけど。問題はそれをどう確認するかです。

多くの CLI ツールはログをたっぷり出す --verbose というオプションを備えています。（verbose で「おしゃべりな」という意味です。）　しかし ESLint にはないようでした。

ないこたないじゃろと “eslint cli verbose” で検索すると、その --verbose オプションを追加しようという issue を見つけました。（そうじゃないけどそういうことにします。）

Add verbose level cli option for output · Issue #1101 · eslint/eslint

で、なんやかんやあってオプションは追加しない、既存の環境変数を使う方法を取れ、とのことみたいです。

何をしているのか確認

というわけで DEBUG=eslint:* という環境変数を与えることで詳細な記録を出力しながら実行してくれるらそうです。* はそのままでも良いし特定のものを指定することもできるらしい。

mac や Linux なら空白に続けてコマンドを入力すると、その設定をした状態でコマンド実行できます。Windows はわからないけど WSL 使うといいよ。

というわけで試したところ、ここで停止してしまいました。

$ DEBUG=eslint:* npx eslint .

…

  eslint:file-enumerator Enter the directory: /path/to/my-app/build/static/js  0ms
  eslint:file-enumerator Yield: 2.f787083e.chunk.js  0ms
  eslint:cli-engine Lint /path/to/my-app/build/static/js/2.f787083e.chunk.js  191ms
  eslint:linter Linting code for /path/to/my-app/build/static/js/2.f787083e.chunk.js (pass 1)  6ms
  eslint:linter Verify  0ms
  eslint:linter With ConfigArray: /path/to/my-app/build/static/js/2.f787083e.chunk.js  0ms
  eslint:code-path onCodePathStart s1  4s
  eslint:code-path onCodePathSegmentStart s1_1  0ms
  eslint:code-path s1_1) Program  0ms
▓

この /path/to/my-app/build/static/js/2.f787083e.chunk.js というファイルの作業中に止まるようです。このファイルは Next.js で出力した成果物で、もちろん ESLint で検証する予定ではありません。

なんで止まるのか（時間がかかるのか）はわかりませんが、いずれにせよこのファイルが対象に含まれているのは意図した動作ではありません。

除外する

build/ ディレクトリー下のファイルを見に行かないよう、除外設定をします。

設定は .eslintrc.js へ記述します。package.json とか使ってる人もいると思うんだけどそこら辺はまあうまいこと読み替えてください。

使う設定は ignorePatterns です。

module.exports = {
  …
  ignorePatterns: ["/build/"],
};

設定した状態でもう一度試してみます。

$ DEBUG=eslint:* npx eslint .

…

  eslint:cli-engine Linting complete in: 2873ms  60ms

無事に 3 秒で終わるようになりました。やったね。

おしまい

該当ディレクトリーは .gitignore へは追加していたので油断していました。というか自動で .gitignore から引っ張ってきて対象にしてほしいような。いやそれはそれでなんか違うかなあ。スクリプト書くのもアレだしなあ。

先にまとめ

なんか遅い……

何をしているのか確認

除外する

おしまい

参考