Microsoft が自ら提供している Visual Studio Code の ESLint 拡張 (vscode-eslint) がメジャー バージョンアップして、その設定方法が大幅に変わったのでまとめてみます。
ESLint の自動修正を保存時に自動的に適用するための設定
v1 で提供されていた eslint.autoFixOnSave 設定は廃止され、代わりに editor.codeActionsOnSave または editor.formatOnSave を利用します。言い換えると、vscode-eslint 独自の方法で保存時の処理を実施していたのが、Visual Studio Code の標準的な方法で実施するように変更されたわけですね。2 つありますが、editor.codeActionsOnSave のほうが推奨されています。
editor.codeActionsOnSave
コードアクション (拡張機能がコードへの指摘をユーザーに示すための機構) を保存時に実行する設定です。Visual Studio Code では ESLint の自動修正はすべてコードアクションとして扱われていて、ポップアップ UI から 1 個ずつ適用できます。これを保存時に全部適用しようというものです。
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
@typescript-eslint/eslint-plugin など、解析に時間がかかるプラグインを利用している場合は editor.codeActionsOnSaveTimeout を長めに設定してあげる必要があります。デフォルトでは 750ms になっていて、ESLint の処理がこの時間以内に終わらなければ自動修正は行われません。editor.codeActionsOnSaveTimeout 設定は削除され、時間がかかっているときは右下に中止ボタン付きのポップアップが表示されるようになりました。
editor.formatOnSave
こちらは推奨される方法ではありませんが、念のために紹介します。
ESLint をフォーマッターとして利用し、「ドキュメントを整形する」アクションを保存時に実行する設定です。ESLint はフォーマッターではないのでむりやり感がありますね。
{
"editor.formatOnSaveTimeout": 2000,
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}
@typescript-eslint/eslint-plugin など、解析に時間がかかるプラグインを利用している場合は editor.formatOnSaveTimeout を長めに設定してあげる必要があります。デフォルトでは 750ms になっていて、ESLint の処理がこの時間以内に終わらなければ自動修正は行われません。
JavaScript 以外のファイルで ESLint を利用する設定
v1 では、vscode-eslint は JavaScript ファイルだけをデフォルトで検証し、その他のファイルで ESLint を使いたいときは eslint.validate 設定を書く必要がありました。v2 では、.eslintrcファイルに適切な設定があれば、TypeScript, Vue, HTML ファイルもデフォルトで検証します。
- TypeScript ... カスタム パーサーとして
@typescript-eslint/parserが設定されている - Vue ... プラグイン設定に
eslint-plugin-vueが存在する - HTML ... プラグイン設定に
eslint-plugin-htmlが存在する
これらの設定が overrides セクションにあってもしっかり認識してくれるようです。
一方、上記以外のファイルで ESLint を使いたいときは引き続き eslint.validate 設定が必要です。
モノリポ (mono repository) で ESLint を利用する設定
ESLint を実行するには、CWD (current working directory) の設定が重要です (.eslintignoreは CWD にあるものしか認識しないので)。
ほとんどの場合、Visual Studio Code のワークスペースのディレクトリで良いのですが、モノリポでは各プロジェクトのディレクトリで ESLint を実行したい場合があります。そのようなケースではeslint.workingDirectories設定を使います。
いくつかのパターンがあります。
{
"eslint.workingDirectories": [{ "mode": "auto" }]
}
↑ ワークスペース内のpackage.jsonや.eslintignore等のファイルを手がかりに CWD となるディレクトリを自動的に決定します。
{
"eslint.workingDirectories": [{ "pattern": "./packages/*/" }]
}
↑ Glob パターンで CWD となるディレクトリを指定します。指定したディレクトリ内のファイルをリントする時に使われます。
{
"eslint.workingDirectories": ["./packages/alice", "./packages/bob"]
}
↑ CWD となるディレクトリの配列を指定します。指定したディレクトリ内のファイルをリントする時に使われます。