ESLintについて調べた内容

ESLintとは何か

一言で言えば、EcmaScriptの財団で明示した仕様に反していないかをチェックしてくれるツールのこと。
ESLintは、コードのスタイルや規則に反するところを知らせてバグを産まないようにすることができる。
なお、コードのスタイルや規則は個人によって、または会社によって異なるケースもあるため、.eslintファイルをもってカスタムすることも可能。

設定方法

やり方としてはpackage.jsonに直接eslintの設定をする方法あり、.eslintファイルに別途設定する方法がある。
もし、.eslintとpackage.jsonが両方存在する場合、.eslintが適用される。（内部的には.eslintがpackage.jsonにオーバーライディングされるらしい）

.eslintの配置場所

監視したいファイルのルートディレクトリに保存すればOK。

your-project
├── .eslint
├── lib
└── source.js

上記のように.eslintファイルを置くことで、source.jsファイルをeslintが見ることができる。
また、場合によっては.eslintファイツを２箇所に置くことも可能。

your-project
├── .eslint1
├── lib
│ └── source.js
└─┬ tests
  ├── .eslint2
  └── test.js

上記の方法だと、testsフォルダーにあるtest.jsファイルは、.eslint1と.eslint2の両方の規則が適用され、重複するルールがある場合、一番近い.eslintの設定に従うことになる。

eslintのインストール

基本的には以下のコマンドでインストールすることができる。

npm install -g eslint

すると、以下のようにインストールされる。

$ npm install -g eslint
/usr/local/bin/eslint -> /usr/local/lib/node_modules/eslint/bin/eslint.js
+ eslint@7.15.0
added 109 packages from 64 contributors in 3.087s

インストールが終わったら、初期設定が必要である。
eslint --initのコマンドを叩くと、以下のようにいくつかの質問に答えることになるが、自分のプロジェクトに合うルールに答えて設定を完了させる。

$ eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:
...

eslint-plugin-vue@latest
✔ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest

上記の設定が完了されると、以下のようにeslintの設定ファイルが生成される。

• env: 使用する環境を意味する。
• ectends: 使用する拡張機能について記載する部分。
• parserOptions: バージョンとモジュールの内容を記載する部分
• plugins:使用するプラグインの記載する部分
• rules:ルールの詳細の設定を記載する部分。

ESLintのルール

ESLintのルールはこちらの公式サイトで確認することができる。
まず、公式ドキュメントにあるルールを適用させるためには、extendsにあるexlint:recommendedの属性が追加されている必要である。
ルールはオブジェクトの形式でキーは属性名になり、値はoff,warn,errorの３つになる。内容としては以下の通りである。

• "off": 該当のルールを適用しない
• "warn": 該当のルールに反すると、警告を出す。（コードには影響を与えない）
• "error": 該当のルールに反すると、エラーを吐き出すようにする

例

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error"
    }
}