Help us understand the problem. What is going on with this article?

vscode-eslint v2

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 個ずつ適用できます。これを保存時に全部適用しようというものです。

settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

@typescript-eslint/eslint-plugin など、解析に時間がかかるプラグインを利用している場合は editor.codeActionsOnSaveTimeout を長めに設定してあげる必要があります。デフォルトでは 750ms になっていて、ESLint の処理がこの時間以内に終わらなければ自動修正は行われません。 Visual Studio Code 1.42 (January 2020) にて editor.codeActionsOnSaveTimeout 設定は削除され、時間がかかっているときは右下に中止ボタン付きのポップアップが表示されるようになりました。

editor.formatOnSave

こちらは推奨される方法ではありませんが、念のために紹介します。
ESLint をフォーマッターとして利用し、「ドキュメントを整形する」アクションを保存時に実行する設定です。ESLint はフォーマッターではないのでむりやり感がありますね。

settings.json
{
  "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設定を使います。

いくつかのパターンがあります。

settings.json
{
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

↑ ワークスペース内のpackage.json.eslintignore等のファイルを手がかりに CWD となるディレクトリを自動的に決定します。

settings.json
{
  "eslint.workingDirectories": [{ "pattern": "./packages/*/" }]
}

↑ Glob パターンで CWD となるディレクトリを指定します。指定したディレクトリ内のファイルをリントする時に使われます。

settings.json
{
  "eslint.workingDirectories": ["./packages/alice", "./packages/bob"]
}

↑ CWD となるディレクトリの配列を指定します。指定したディレクトリ内のファイルをリントする時に使われます。

mysticatea
ESLint のメンテナ。Vue.js の開発チームメンバー。JavaScript 言語仕様書 ECMA-262 や JavaScript 構文解析器 Acorn のコントリビューター。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした