ESLintとは？

JavaScriptを静的に検証するツール。コーディングのルールの設定とフォーマットを行えるがルールはESLintで行いフォーマットはPrettierで行うのが一般的。

最近はこれらのJSで利用するシステムを統一する動きがある。Romeで検索。

そもそもlintとは？

一般的なコンピューター用語っぽい。

lintとは、コンピュータプログラムなどのソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール。また、そのようなツールで解析を行うこと。ツールを指す場合は “linter” （リンター）と呼ぶこともある。
https://e-words.jp/w/lint.html

CODE-EGG

ESLintの実行環境

Node.jsとnpmさえあれば動かせる。
(Node.jsをインストールしたらnpmもついてくるのでNode入れれば動く。)

ESLintの立ち位置

JSのLintのデファクトスタンダード

CODE-EGG

環境構築

npmではなくyarnを使っていますが、npmでも読み替えるだけでできます。

yarn init -yでpackage.jsonを作成
yarn add - - dev eslint
プロジェクト直下に.eslintrc.jsonを作成。

jsonファイルは普通コメントを書けないが、.eslintrc.jsonは書ける。

.eslintrcは現在非推奨。

以上。

CODE-EGG

実行方法

ターミナル(ローカルインストール)

./node_modules/.bin/eslint {ファイル名}

ターミナル(グローバルインストール)

eslint {ファイル名}

ただ、package.jsonに書いて実行するのが一般的

package.json

"scripts":{
  "lint": "eslint . --ext .ts,.tsx"
}

これで次のように書ける。

ターミナル

yarn lint

CODE-EGG

ルールの追加

ルールを追加しないとeslintは動きません。ルールを追加するには.eslint.jsonにruresを追加します。

例

{
  "rules": {
    "文字列オプションありのルール": ["ルール設定", "オプション"],
    "オブジェクトオプションありのルール": ["ルール設定", {"オプションキー": "オプションバリュー"}]
  }
}

{
  "rules": {
    "no-extra-semi": "warn",
    "quotes": ["warn", "single"],
    "space-before-blocks": ["warn", { "functions": "always" }] 
  }
}

CODE-EGG

自動修正

rulesプロパティを追加すると検証はしてくれるのですがそれだけで、エラーは自分で修正する必要があります。
これでは面倒なのでEslintでは検知と修正を同時にやる機能があります。
コマンドの引数に--fixを与えれば実現できます。

ターミナル

eslint src/script.js --fix

ちなみに、fixはすべてのルールが自動変換されるわないので注意が必要です。ESLintのルール一覧ページを確認のレンチマークがあるものが自動修正されます。
https://eslint.org/docs/rules/

CODE-EGG

グローバル変数(関数)の登録

no-undefルールを追加すると未定義はエラーになります。

ESLintは1ファイルずつ解析するのでグローバル変数は未定義の変数としてエラーにしてしまいます。
それを回避するにはglobalsプロパティを利用します。

例

{
  "globals": {
    "変数名": true or false(書き換え可能かどうか)
  }
}

{
  "globals": {
    "alert": false,
    "document": false,
    "$": false,
    "console": false
  },
  "rules": {
    "no-extra-semi": "warn",
    "no-undef": "warn",
    "quotes": ["warn", "single"],
    "space-before-blocks": ["warn", { "functions": "always" }]
  }
}

注意するべき点はglobalsをfalseにすると「書き替えができない」ことを明示的に表しますが、「書き替えを禁止」しているわけではありません。ですので、globalsを定義したら合わせてno-global-assignルールを追加する必要があります。

※この場所は入ってはいけませんよといいながら、フェンスとかは無い状態。

CODE-EGG

環境設定(env)

プロジェクトの環境を決めることでグローバル変数を一括で利用できるようにします。

{
    "env": {
        "node": true,
        "es6": true
    }
}

envのbool値はenvの有効無効の設定。上書き可能かどうかはglobalsというモジュールがあるのでそちらで設定されておりenvはそれを読み込むようになっている。
基本envでenvになければglobalsを利用すればOK

CODE-EGG

プラグインの利用

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

extends

プラグインが提供する推奨設定を指定

plugins

使用するプラグインを指定します
eslintプラグインは次のようなパッケージ名に必ずなっています。

eslint-plugin-node

pluginsには「eslint-plugin」を抜き取ってnodeと記載します。

rules

pluginsで設定したプラグインごとのルールを定義します。

CODE-EGG

envプロパティの一覧

CODE-EGG

extends

ルールをまとめて設定するプロパティ。eslintのおすすめがあるので一つずつ設定せずにこちらを利用してオンオフ切り替えていこう。
https://eslint.org/docs/rules/
ここでチェックがついているものを一括で適用させるのであればextendsに以下の設定を追加する。

"extends": "eslint:recommended",

CODE-EGG

overrides

ファイルごとにルールを上書きする際に子フォルダ内に設定を書くことで解決できるが(子フォルダのほうが優先順位が高いため)、それだと設定が散らばってしまい管理が難しい。そのため、overridesプロパティを設定して、一元管理することができる。