VSCodeでプロジェクトの設定と異なるSeverityでESLintエラーを報告する

課題： ESLintルールはそのままに、自分のエディタ上の表示を変更したい

とあるTypeScriptプロジェクトにおいて、「あるESLintをチェックすることはOKだが、視認性の関係でエディタ上でのSeverityを変更したい」という要求がありました。

例えば@typescript-eslint/no-unused-varsをerrorに指定していると、使用していない変数がある場合にエディタ上で赤く波線が表示されます。

未使用の変数hogeのVSCode上でホバーしている。Lintエラーであることを示す波線が変数名の下に出ており、エラーであるため赤い色で表示されている。

使われていない変数があることをチェックするのはルールとして残しておきたいが、エディタ上ではエラーではなく警告を示す黄色の波線として表示したい、という要求です。解決策の一つは愚直にルールのSeverityを変更することですが、これは他の開発者にも影響を与えてしまうという問題があります。

VSCodeの`eslint.rules.customizations`を使ってSeverityを変更する

VSCodeのESLint拡張には、このような要求を満たすための設定があります。それがeslint.rules.customizationsです。

eslint.rules.customizations (@since 2.1.20) - force rules to report a different severity within VS Code compared to the project’s true ESLint configuration. Contains these properties:

設定できるプロパティは次の3つです。

rule: 対象とするESLintのルール名。ワイルドカードとして*、否定として!が使えます。
severity: ルールのSeverity。default、off、info、warn、error、downgrade、upgradeのいずれかを指定します。後2つはeslintの設定に対して緩めるか、厳しくするかの指定です。
fixable: autofixを有効にするかどうか。trueかfalseを指定します（※autofixが可能なルールのみ）。

先にあげた例を実現するならば、次のように設定します。

  "eslint.rules.customizations": [
    {
      "rule": "*no-unused-vars",
      "severity": "downgrade" // もしくはwarnでもよい
    }
  ]

未使用の変数hogeのVSCode上でホバーしている。警告はエラーの時と同じだが、Lintエラーが出ていることを示す波線が警告の黄色になっている

もともとエラーの赤線だったものが、警告の黄色線に変わり、期待していた挙動を実現できました。

記載はユーザー固有のsettings.jsonでも適用されるため、もしプロジェクト全体に影響を与えたくない場合は個人の設定として適用することができます（オーバーライドする設定なので、ワークスペース側の設定に書くことはないと思いますが）。