ESLint概要

ESLintとは

静的解析ツール。標準でバンドルされてるものも含めて、全てのルールが本体から切り離されたプラグインとして平等に扱われ、個別に適用の可否やエラーレベルの調整が可能。

Create React App　で生成したものには、デフォルトでインストールされている。プロジェクト作成後、別途最新のバージョンをインストールすることも可能だが、サポートしていない可能性もあるので、注意。

https://eslint.org/

ESLintのエコシステム

本体を除くと３種類に分類される。

パーサ

コードを特定の言語使用に沿って解析してくれるライブラリ。 ESLintの場合、標準でJSのパーサが組み込まれてるが、TypeScriptには対応していないので、別途導入する必要がある。

https://github.com/typescript-eslint/typescript-eslint

プラグイン

ESLintの組み込みルール以外に独自ルールを追加するもの。推奨の共有設定に内包された形で提供されるケースが多い。 *プラグインのルールはインストールして読み込んだだけでは、ルールは適用されない点、要注意。ルールを適用するには、後述する eslintrc.js の extendsにプラグイン推奨の共有設定を追記する必要がある。

共有設定

複数のルールの適用をまとめて設定するもの。ESLintに同梱される eslintrecommended や、Airbnbが提供してる eslint-config-airbnb が有名。

eslintrc(設定ファイル)のプロパティについて

env

プログラムの実行環境をESLintに伝える。

extends

共有設定を適用する。これは、ESLintに標準で含まれているもの、別途インストールしたものやインストール済のプラグインのパッケージに含まれてるものを指定する。ルール設定が重複してる場合は、後ろに記述されたものが優先される。

parser

パーサを指定。

parserOptions

パーサの各種実行オプションを設定。

plugins

インストール済のプラグインを組み込む。

rules

適用する個別ルールと、エラーレベル、例外等の設定値を記述。

ESLint設定事例

良く見かけるパッケージ(これらを入れとけば、React開発は事足りるかも)

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin \ eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import \ eslint-plugin-jsx-a11y eslint-config-airbnb

eslintrc.jsのカスタマイズルール事例 参照：ESLintの適用ルールカスタマイズ事例

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb/hooks',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    project: './tsconfig.eslint.json',
    sourceType: 'module',
    tsconfigRootDir: __dirname,
  },
  plugins: [
    '@typescript-eslint',
    'import',
    'jsx-a11y',
    'react',
    'react-hooks',
  ],
  root: true,
  rules: {
    'lines-between-class-members': [
      'error',
      'always',
      {
        exceptAfterSingleLine: true,
      },
    ],
    // should be rewritten as `['error', { allowAsStatement: true }]` in ESLint 7 or later
    // SEE: https://github.com/typescript-eslint/typescript-eslint/issues/1184
    'no-void': 'off',
    'padding-line-between-statements': [
      'error',
      {
        blankLine: 'always',
        prev: '*',
        next: 'return',
      },
    ],
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        'vars': 'all',
        'args': 'after-used',
        'argsIgnorePattern': '_',
        'ignoreRestSiblings': false,
        'varsIgnorePattern': '_',
      },
    ],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.jsx', '.tsx'],
      },
    ],
    'react/jsx-props-no-spreading': [
      'error',
      {
        html: 'enforce',
        custom: 'enforce',
        explicitSpread: 'ignore',
      },
    ],
  },
  overrides: [
    {
      'files': ['*.tsx'],
      'rules': {
        'react/prop-types': 'off',
      },
    },
  ],
  settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
  },
};

.eslintignore ファイルを作成して、ESLintの対象外となるファイル定義を忘れずに行いましょう。(これが無いと、不要な場面でlintチェックが入ってエラーが出たり、処理が重くなります)

build/
public/
**/coverage/
**/node_modules/
**/*.min.js
*.config.js

VSCodeでコーディング中に、ESLintが走るようにするには、ESLintの拡張機能を追加して、以下設定を行います。

Code > Preference > Settingから、「Open Settings(JSON)」を押下して、setting.jsonを編集する。

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false,
    "eslint.enable": true,
    "eslint.packageManager": "yarn",