ESLint
文法的には正しいが、間違いを含む可能性のあるコードを検出する
e.g. = と ==（===）
code:js
if (savings = 0) {
}
e.g. window を wisdom と タイポ
導入
コマンド
code:sh
$ npm init @eslint/config
Need to install the following packages:
@eslint/create-config@1.3.1
Ok to proceed? (y) y
以下の質問に答える
How would you like to use ESLint?
To check syntax only
To check syntax and find problems
What type of modules does your project use?
None of these
Which framework does your project use?
None of these
No
Yes
Where does your code run?
Browser
Node
Would you like to install them now?
Yes
No
Which package manager do you want to use? …
インストール完了後、選択肢を元に設定ファイルが作成されるので、必要に応じてカスタマイズする
code:eslint.config.js
const pluginJs = require("@eslint/js");
const pluginJest = require("eslint-plugin-jest");
/** @type {import('eslint').Linter.Config[]} */
module.exports = [
pluginJs.configs.recommended,
{
},
{
languageOptions: {
sourceType: "commonjs",
},
},
ignores
];
除外したいディレクトリは ignores で指定可能
code:eslint.config.js
export default [
{
}
];
実行
code:sh
$ npx eslint
--fix オプションを付けると、自動的に修正可能な問題を修正してくれる
code:sh
$ npx eslint --fix
code:package.json
{
"scripts": {
"test": "jest",
"lint": "eslint . && prettier --list-different .",
"format": "eslint --fix && prettier --loglevel warn --write ."
},
}
以下の拡張機能をインストールすると、コマンドを実行すること無く自動でチェックが走るようになる
Tips
入力終わる前に Linter が警告を発するため、偽陽性 が多く発生する もしこれが気になる場合は、以下のように保存時のみ動作するように設定すれば良い
code:json
{
...
"eslint.run": "onSave",
...
}
ESLint と Prettier との設定が衝突するのを避けるためには、eslint-config-prettier プラグインを追加する
Prettier 公式から提供されている
e.g.
code:eslint.config.js
const eslintConfigPrettier = require("eslint-config-prettier");
/** @type {import('eslint').Linter.Config[]} */
module.exports = [
pluginJs.configs.recommended,
eslintConfigPrettier,
...
]
代替