Emacs で Flycheck, ESLint の設定

TL;DR

やりたいこと

Emacs で ESLint を動作させます。 ESLint の実行ファイルはプロジェクト毎にインストールされたもの（${PROJECT_ROOT}/node_modules/.bin/eslint）を使用し、 ESLint の設定ファイル（${PROJECT_ROOT}/.eslintrc）のルールを用いて lint します。

設定方法

Flycheck で使用している linter を確認するため (flycheck-verify-setup) 関数を使います。 ちなみに JavaScript を編集する際には js2-mode を使用しています。

Syntax checkers for buffer index.js in js2-mode:

No checker to run in this buffer.

Checkers that are compatible with this mode, but will not run until properly configured:

  javascript-eslint (disabled)
    - may enable:  Automatically disabled!
    - executable:  Not found
    - config file: missing or incorrect
...

javascript-eslint (disabled) と表示されているので、Flycheck で ESLint が使えない状態であることが確認できました。

これを修正するには、まずは add-node-modules-path をインストールして ESLint 実行ファイルを Emacs に認識させます。

init.el

;...
(use-package add-node-modules-path
  :hook (js-mode js2-mode))
;...

再びflycheck-verify-setupしてみると

Syntax checkers for buffer index.js in js2-mode:

No checker to run in this buffer.

Checkers that are compatible with this mode, but will not run until properly configured:

  javascript-eslint (disabled)
    - may enable:  Automatically disabled!
    - executable:  Found at ${PROJECT_ROOT}/node_modules/.bin/eslint
    - config file: missing or incorrect
...

executable: Found at ${PROJECT_ROOT}/node_modules/.bin/eslint とあるので、eslint の実行ファイルの設定は問題ありませんが、 .eslintrc を見つけられてない状態であることが確認できました。 しかし、既にプロジェクトルートには .eslintrc を配置しています。

こちらの Issue（Proposal: eslint --locate-config · Issue #7719 · eslint/eslint） を参考にして、 そういえば .eslintrc で extends: airbnb-base しているので依存パッケージあるなと思い、インストールしているパッケージを確認してみます。

$ npm ls --depth 0
example@0.0.1 ${PROJECT_ROOT}
├── clean-webpack-plugin@3.0.0
├── copy-webpack-plugin@5.0.3
├── UNMET PEER DEPENDENCY eslint@6.0.1
├── eslint-config-airbnb-base@13.2.0
├── eslint-loader@2.2.1
├── eslint-plugin-import@2.18.0
├── webpack@4.35.2
└── webpack-cli@3.3.5

npm ERR! peer dep missing: eslint@^4.19.1 || ^5.3.0, required by eslint-config-airbnb-base@13.2.0

UNMET PEER DEPENDENCY, eslint@^4.19.1 || ^5.3.0, required by eslint-config-airbnb-base@13.2.0 と表示されているので、eslint-config-airbnb-base が依存してる ESLint の version があってないんだなと気付きました。

package.json の eslint の version を ^5.3.0 にして npm install し、 Emacs で flycheck-verify-setup したところ、

Syntax checkers for buffer content.js in js2-mode:

First checker to run:

  javascript-eslint
    - may enable:  yes
    - executable:  Found at ${PROJECT_ROOT}/node_modules/.bin/eslint
    - config file: found

Checkers that are compatible with this mode, but will not run until properly configured:
...

とうまく設定されていることが確認できました。 きちんと Flycheck も動いて、Emacs に波線等が表示されるようになりました。

恐らく ↑ で .eslintrc を配置していたけど、Not Found って出ていたのは、設定ファイルが正しく認識されていなかったからなのではと推測‥