よく忘れる ESLint の設定 - けけずんセルフハッキング

ESLint を使うときにプラグインを入れるだけでいい感じに動くと思っていたが、毎度そのへんの設定でいつも苦しめられていたので少し調べた。

設定ファイルについて

設定ファイルの読み込み優先度

ESLint の設定はいくつかの形式で記述できるが、それぞれ読み込みに優先度があるらしい。優先度は以下の通り。

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

対応するESのバージョン

ESLint はデフォルトではES5のみ扱えるらしく、それ以外に対応したい場合はオプションを設定する必要があるらしい。例えば ES6 に対応させたい場合は以下のように env プロパティで es6 を true にすればよいらしい。

module.exports = {
  env: {
    es6: true,
  },
};

以下のように parserOptions で指定もできるが、これだと自動的にグローバルに設定されないって公式に書いてたけどよく分からんかった。

module.exports = {
  parserOptions: {
    ecmaVersion: 6,
  },
};

env に設定してあげるほうが無難かもしれん。

pluginsとextendsの違い

これ毎回どっちがどっちだよってなる。ざっくりとこんな感じか？

plugins

ルールセットを持つプラグインを指定する項目。本来であれば plugins にプラグインを指定して、且つ extends にそのプラグインが持つルールを指定しないと検証時にルールが適用されないらしいが、prettier はなぜか plugins に指定しただけでルールが適用されてる。謎。

基本的には eslint-plugin-xxx というパッケージの xxx の部分を plugins に記述してあげればいいらしい。

extends

プラグインが提供するルールを指定する項目。 eslint-plugin-xxx というパッケージを plugins で指定した場合は、extends に xxx/yyy というふうにルールを指定してあげるらしい。

また、plugins は使わずに eslint-config-zzz というパッケージをインストールし、extends に zzz と指定してあげてもなんとかなるっぽい。

各プラグインについて

複数のプラグインを使用する場合、記述した順番次第で設定が上書きされるらしいので注意が必要。

Prettier

eslint --fix コマンドで ESLint だけでもコードフォーマットは行えるらしいが、 Prettier の方が優れたコードフォーマットをしてくれるらしいので ESLint 入れるときはプラグインとして Prettier も大体一緒に入れられるっぽい。

静的検証のみ行いたい場合

ESLint と一緒に Prettier の検証をしたい場合は以下のパッケージをインストールして設定するだけでよい。

prettier
eslint-plugin-prettier

module.exports = {
  plugins: [
    'prettier',
  ],
  rules: {
    'prettier/prettier': 'error',
  }
};

コードフォーマットもしたい場合

plugins に prettier を追加しただけだとフォーマットの際に ESLint の設定と衝突する場合がある。それを避けるために以下のパッケージをインストールして設定する必要がある。

eslint-config-prettier

module.exports = {
  extends: [
    'prettier',
  ],
  plugins: [
    'prettier',
  ],
  rules: {
    'prettier/prettier': 'error',
  }
};

ちなみに以下は上記の記述の短縮形らしい、ややこしいなホンマ。

module.exports = {
  extends: [
    'plugin:prettier/recommended',
  ],
};

Vue

Vueのスタイルガイドの項目に合わせた検証を行なうことができるっぽい。以下のパッケージをインストールして設定を行えばおっけー。

eslint-plugin-vue

module.exports = {
  extends: [
    'plugin:vue/recommended',
  ],
};

extends に指定した項目の末尾 recommended の他にも essential とかあって、それぞれでルールのレベルが異なるらしい。参考URLに貼ったページの先で解説してあるから詳しくはそっち見てね。

TypeScript

ESLint にTypeScriptのプラグインを入れればちゃんと検証してくれるらしい。ただTypeScriptの場合は ESLint の設定に parser を指定する必要があるので、忘れずに。以下はインストールするパッケージ。

@typescript-eslint/eslint-plugin
@typescript-eslint/parser

個別に設定されたルールを指定したい場合は以下の通り。 @typescript-eslint/rule-name の rule-name は適宜置き換えて使ってとのこと。

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
    '@typescript-eslint/rule-name': 'error'
  }
};

用意されたルールセットからルールを指定したい場合は以下の通り。 parser の指定すら必要ないっぽい。

module.exports = {
  extends: [
    'plugin:@typescript-eslint/recommended',
  ],
};

ESLint が推奨しているルールと併用したい場合は以下の通り。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

Prettier と併用したい場合は以下の通り。順番に注意。

module.exports = {
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/@typescript-eslint',
  ],
};

おわりに

ここまでざっと書いたけど、基本的に公式ドキュメントや各パッケージの README に書いてるものをまとめただけ。詳細について知りたい方はドキュメント見てね。