🐶

ESLintのプロパティとルール設定について

2023/10/28に公開

JavaScript

はじめに

ESLintの設定で使われているプロパティや、ルール設定の考え方がよくわかっていなかったので、調べた結果をアウトプットをします。
※flat configについては書いてません。

プロパティ

plugins

ESLintのルールセットを拡張するプロパティ
例えば、TypeScriptに対応したESLintルールのセットなどがあります。
pluginsのルールセットを設定しておけば、設定したルールを使うことができます。
しかし、rulesに記載しなければ、ルールは適用されません。

例えばこんな感じ

module.exports = {
  plugins: ["@typescript-eslint"],
  rules: {
    // ここにルールを書かないと、ルールは適用されない。
    "@typescript-eslint/no-non-null-assertion": "warn",
    },
};

rules

ルールを適用 / 無効するためのプロパティ
pluginsのルールセットは、ここで設定すれば使うことができます。
例えばこんな感じ

  plugins: ["@typescript-eslint"],
  rules: {
    // 非nullアサーション演算子を使うと、warningを出すようになる。	
    "@typescript-eslint/no-non-null-assertion": "warn", 
  },
};

上記は、@typescript-eslintのルールから、no-non-null-assertionというルールを使っています。
ちなみに、eslintのルールの強度は以下になります。
off → 何も出ない
warn → 警告する
error → エラー表示される

overrides

適用したルールを上書きするプロパティ
例えば、特定のファイルだけ、ルールを適用させたくないときなどに使います。
以下のように書くと、filesに記載したファイルだけ、非nullアサーション演算子を使ってもエラー表示されなくなります。

module.exports = {
  plugins: ["@typescript-eslint"],
  rules: {
    // 非nullアサーション演算子を使うと、warningを出すようになる。
    "@typescript-eslint/no-non-null-assertion": "warn", 
  },
  overrides: {
      {
      "files": ファイルのパス,
      "rules": {
        "@typescript-eslint/no-non-null-assertion": "off",
      }
    },
  }
};

parser

パーサーの設定
生のJSじゃないファイルをパースするために、設定をします。
例えば、VueとかReactとかTypeScriptなどですね。

extends

pliginsやrulesが、すでにまとめてられている、shareable configを設定するプロパティ

extendsを設定すれば、わざわざpluginsやrulesでべた書きしなくても、設定したshareable configの中でまとめられているpluginsやrulesを一気に設定することができます。

例えば、以下のような場合、@nuxtjs/eslint-config-typescriptでまとめられているpluginsやrulesを設定することができます。

module.exports = {
  extends: [
    "@nuxtjs/eslint-config-typescript",
  ],
};

ちなみに、@nuxtjs/eslint-config-typescriptの中身は、以下になります。
上記の3行の記述で、以下のルールが一気に設定できるのはめちゃめちゃ楽ですよね。

module.exports = {
  extends: [
    '@nuxtjs',
    'plugin:@typescript-eslint/recommended'
  ],
  plugins: [
    '@typescript-eslint'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  rules: {
    '@typescript-eslint/no-unused-vars': ['error', { args: 'all', argsIgnorePattern: '^_' }],
    // Per the docs, the root no-unused-vars should be disabled:
    // https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md
    'no-unused-vars': 'off',

    // https://github.com/typescript-eslint/typescript-eslint/blob/1cf9243/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
    'no-undef': 'off',

    // For easier migration
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/consistent-indexed-object-style': 'off',
    '@typescript-eslint/naming-convention': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-member-accessibility': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/parameter-properties': 'off',
    '@typescript-eslint/no-empty-interface': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-namespace': 'off',
    '@typescript-eslint/triple-slash-reference': 'off'
  },
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx']
    },
    'import/resolver': {
      typescript: {}
    }
  }
}

extendsは複数設定できる

extendsは複数設定できて、後に書くものほど優先度が高くなります。
書く順番の違いで、設定内容が変わってしまうということになるので、気をつけるポイントですね。

env

グローバル変数を設定するプロパティ

例えば、ブラウザでは、windowなどがありますが、グローバル変数として設定しておかないと、コードで、window.〇〇みたいなコードを書くと、eslintに未定義の変数使ってるぞーって怒られちゃうんですよね。それを回避するために、グローバル変数を設定します。

以下のような感じで、設定することが多いです。
ブラウザ・JSのバージョン指定・nodeって感じです。

module.exports = {
  env: {
    browser: true,
    es2022: true,
    node: true,
  },
};

設定の考え方

色々調べていった中で、eslintの設定ファイルは、
ひとまず、下記のような考え方で設定すればいいのではないかなと思いました。

開発環境にあったenvを設定する。
extendsでrulesやparserをまとめて設定
extendsで包括しきれなかった設定を、別途 rules / overridesなどで設定する。
実際に使っていく中で、途中でない方が良いルールは削ったり、必要だと思ったルールは追加してしまって調整するのも良さそう。
※私の一意見ですが。

最後に

ESLintは何となく設定していたので、実際に調べて、設定の意味が少しでも理解できてよかったです。

ですが、ESLint公式が、2023年末〜2024年初めリリースされるv9.0.0から、flat configが推奨となり、従来の方法は非推奨になるとのことです。flat configキャッチアップしなければですね。