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 theseReactも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 / YesTypeScriptを使うので "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 ✔ NodeBroserだけ選択状態になっているので、カーソルを"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 / YesYesを選択すると、必要なモジュールを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": { } };