maya's blog

About programming, aws and ubuntu

Emacs 26.2 + Flycheck + ESLint

TL;DR

なにするの

Emacsで${PROJECT_ROOT}/node_modules/.bin/eslintを実行ファイルにし、 ${PROJECT_ROOT}/.eslintrcのルールでチェックするよう設定する。

どうするの

EmacsのSyntax CheckerにはFlycheckを用いているので、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))
...

既にプロジェクトルートには.eslintrcを配置している。

再び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
...

eslint は認識できているけど.eslintrcが認識できていない。 なんでだろうと小一時間検索して以下のIssueを見つけた。

Proposal: eslint --locate-config · Issue #7719 · eslint/eslint

そういえば.eslintrcextends: airbnb-base していたな、eslintがairbnbのruleを読み取っているから別パッケージ使ってんのかなって思って

$ 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.jsoneslint の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も動いてる。

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

あとで挙動を確認(してみたい)