ESLintの基本を最低限おさえること

javascriptで開発を行う時にコードの静的解析ツールのESLint × Prettierを使うことが多いので ここでESLintをしっかり理解しようとして調べてみたが
突っ込んで色々調べるとけっこう深そうなので、
実際に使用するにあたっての基本的な要点だけを抽出してまとめる。
※完全に独断と偏見で...

ESLintとは？

ESLintはソースを検証ルールを設定し静的検証を行うことできるツール。
検証ルールを作成、または読み込み、コードを実行する前にバグや 記述方法を統一されているかのチェックを行うことができる。

インストール

前提としてESLintを使うにはNode.js 8.10.0 以降を使う必要がある。
必要なパッケージは下記なのでインストールする

Copy
yarn add eslint

確認する
グローバルインストールしてない場合はpathを通して実行する必要がある

Copy
$ ./node_modules/.bin/eslint -v
v8.20.0

eslintはnode_modules/.bin/にある。

.eslintrc.js

.eslintrc.jsはESlintの設定は.eslintrc.jsに記述する。

Copy
{
    "extends": ["eslint:recommended"],
    "plugins": [],
    "parserOptions": {},
    "env": {"browser": true},
    "globals": {},
    "rules": {}
}

各設定項目の動作をまとめる

rules

個別の検証ルールを設定できる。
自分で独自ルールを作る場合はここで設定する。

plugins

まずESlintのpluginとはpluginは外部に公開されている検証ルールのセットのこと。 たとえば下記のようなものがある

• eslint-plugin-react: Reactに特化したESLintのプラグイン
• eslint-plugin-react-hooks: ReactHooksに特化したESLintのプラグイン
• eslint-plugin-jsx-a11y: ReactHooksに特化したESLintのプラグイン
• eslint-plugin-import: モジュールのインポートに関連するESLintのプラグイン

上記のpluginは外部に公開されているのでnpmやyarnを使ってインストールする必要がある
インストール後に.eslintrc.jsのpluginsに設定することで
それぞれの検証ルールのセットを読み込むことができる。

pluginsにplugin(検証ルールセット)を設定しただけでは検証ルールは有効にならない。

注意点としてはpluginをeslintrc.jsのpluginsに設定しただけではその検証ルールは有効にならない。
というのもpluginsにpluginを設定しただけでは、ルールが追加されただけで
そのルールを使うかどうか(on,off)は指定されていない状態のため。

例えばReactに特化したESLintのプラグインをインストールして

Copy
yarn add eslint-plugin-react

.eslintrcのpluginsに設定する
※eslint-plugin-は省略して設定できる

Copy
{
    "extends": ["eslint:recommended"],
    "plugins": ["react"],
    "env": {
        "browser": true,
        "es6": true
    },
    "rules": {
    }
}

この状態ではReactに特化した検証ルール自体が追加されただけで
検証ルールは有効化されていない。

有効にするには？

有効にするには下記のいずれかでルールを有効かする必要がある。

• rulesの項目で登録したルールを呼び出す設定を追加する
• extendsに使うルールの共有設定を登録する

extends

extendsでは検証ルールセットのon,offを設定してある外部ファイルを設定する。
設定することで検証ルールを有効化することができる。 各pluginには検証ルールの内、どのルールを有効化(onにする)かの推奨設定が
公開されているのでそれを設定するイメージ

pluginsに設定したplugin(react)の検証ルールの推奨設定(plugin:react/recommended)　　 をextendsで設定する

Copy
{
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "plugins": ["react"],
    "env": {
        "browser": true,
        "es6": true
    },
    "rules": {
    }
}

env

プログラムの実行環境を設定する
envを設定することで静的検証の前提条件を指定することができる。

ブラウザで実行されるコードを検証する場合

Copy
{
    "env": {
        "browser": true
    }
}

Node.jsで実行されるコードを検証する場合

Copy
{
    "env": {
        "node": true
    }
}

parserとparserOptions

parser

parserは構文解析する時に使われる。
デフォルトではES5形式のJavaScriptしか読み込めないため
ES6の構文を書いて構文解析を実行すると失敗する。

parserOptions

parserOptionsはparserのさらに細かい設定をすることができる。

例えばtypescriptでjsxを対象にする場合などは下記のような感じになる。

Copy
~
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2021,
    sourceType: 'module',
  },

extendsとpluginsについて

extendsとpluginは似たような項目であり、混乱するため少しまとめる。

• pluginsで設定するpluginはインストール要
• pluginsは検証ルール自体を追加する
• pluginsに設定しただけでは検証ルールは有効化されない。
• extendsは検証ルールのどれを使うか(on,offを設定)を設定する

pluginsに設定なしでextendsのみに記述しても検証ルールを有効化できる場合がある。

これがかなりややこしかったが、本来であれば

1. pluginをインストール
2. pluginsにpluginを設定
3. extendsでpluginの検証ルール設定(on,off)

でpluginの検証ルールを有効化することができるが

1. pluginをインストール
2. pluginsにpluginを設定
3. extendsでpluginの検証ルール設定(on,off)

pluginsの設定なしで有効化できる場合がある。 端的にいうと3で読み込んでいるpluginの検証ルール設定の外部ファイル内で
pluginsが書かれていて、そこで読んでいるためなくても動くようだ

詳しくは下記で詳しく書かれてます。

• ESLint の Plugin と Extend の違い

ESlintの実行

検証ルールの設定ができたので実行の方法をまとめる。
sampleとして下記の.eslintrc.jsonとindex.tsxを作って試してみる。

.eslintrc.json

文字列がダブルクォーテーションで囲まれたらエラーの検証ルールを作る

Copy
{
  "extends": [
    "next/core-web-vitals"
  ],
  "rules": {
    "no-extra-semi": "warn",
    "quotes": [2, "single"]
  }

}

test.tsx

文字列がダブルクォーテーションになっている

Copy
import type { NextPage } from 'next'

const Home: NextPage = (props) => {  
    return (
      <>
      <div>page</div>
        <div>{"test"}</div>
      </>
    )
}

export default Home

コマンドで実行する

直接コマンドで実行する場合はpathを通す必要があるので
下記のようになる

Copy
$ ./node_modules/.bin/eslint pages/test.tsx

C:\develop\Next.js\scrawledmg\pages\test.tsx
  8:15  error  Strings must use singlequote  quotes

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

• eslint ファイル名orフォルダ名で実行できる

ただ毎回、これを実行するのは面倒なのでpackage.jsonに下記を追加しておく ※package.jsonに書く場合、./node_modules/.bin/は省略可能。

Copy
"scripts": {
    "lint": "eslint pages",
  },

実行する

Copy
$ yarn lint
yarn run v1.22.10
$ eslint pages

C:\develop\Next.js\scrawledmg\pages\test.tsx
  8:15  error  Strings must use singlequote  quotes

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

実行するとエラーが検出できる。

コマンドで実行する(fixオプション)

fixオプションをつけることで検出と同時に整形することができる

Copy
"scripts": {
    "lint": "eslint pages --fix",
  },

実行すると

Copy
$ yarn lint
yarn run v1.22.10
$ eslint pages --fix
Done in 1.89s.

実行と同時に整形される。

ESlintのまとめ

実際にESlintを使う上では上記項目ぐらいを抑えておけば一応、書いてあること
自体は理解できるのでいいかと思う。 検証ルールを自分で作るのはかなりしんどそうなので、実際はpluginをインストールして
extendsに設定するだけになりそうです。

参考

下記のサイトを参考にさせて頂きました

• はじめてのESLint
• ESLint 最初の一歩
• Step by Stepで始めるESLint
• ESLintのルールを全部手動で設定するのは大変だからやめておけ
• ESLintのPluginとExtend の違い
• ESLintのPluginとExtend の違い