ESLintについて

インストール

以下でインストールします。

npm i -D eslint

設定ファイル

ESLintの設定ファイルは、以下のコマンドで作成できます。 この場合、いくつか質問に答える対話形式となります。

npx eslint --init
上記を実行すると、まず以下のような質問が表示されますので、3つのどれかを選択します。
? How would you like to use ESLint? … 
  To check syntax only
▸ To check syntax and find problems
  To check syntax, find problems, and enforce code style
ここでは、2つ目のシンタックスチェックと問題点を見つけるを選択しました。 選択肢を決定してリターンキーを押すと、次の質問が表示されます。
✔ How would you like to use ESLint? · problems
? What type of modules does your project use? … 
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
ここでは、1つ目の "JavaScript modules" を選択

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
? Which framework does your project use? … 
▸ React
  Vue.js
  None of these
ReactもVue.jsも使用しないので、3つ目の "None of these" を選択
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
? Does your project use TypeScript? ‣ No / Yes
TypeScriptを使うので "Yes" を選択。
 How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
Broserだけ選択状態になっているので、カーソルを"Node"に移動してスペースキーを押してNodeも選択状態にします。
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
? What format do you want your config file to be in? … 
▸ JavaScript
  YAML
  JSON
設定ファイルのフォーマットをJavaScript、YAML、またはJSON から選択します。 この例ではJavaScriptを選択します。
 How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? ‣ No / Yes
Yesを選択すると、必要なモジュールをnpmでインストールします。

.eslintrc.js

作成された設定ファイル .eslintrc.js は以下のようになります。
module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
};