ESLint の設定をエディタ補完や型検査つきで書く

ESLint の設定に関する TypeScript の型情報を提供してくれる eslint-define-config (ESLint 非公式プロジェクト) のご紹介.

使い方

eslintrc の場合は defineConfig, Flat Config の場合は defineFlatConfig で設定を囲むだけで VSCode などエディタ上で補完が効くようになります. これらの関数の実体はただの恒等関数なので, 型情報を提供する以上のことは何もしません (つまり何も気にせず追加できます).

import { defineFlatConfig } from "eslint-define-config";

export default defineFlatConfig([
  // ...
  {
    rules: {
      "no-console": "error",
    },
  },
  // ...
]);

型検査も有効にするのであれば // @ts-check をファイル先頭に書くなどしておきましょう. (どのみち設定が間違っていれば ESLint の実行時にエラーになってくれたりするので, そこまではしなくても良いとも思っています.)

ESLint プラグインを使う

プラグインが提供するルールの型情報はデフォルトでは提供されていません (v2.0.0 以降). ただし拡張の仕組みが用意されているので, プラグインなどから追加の型情報を提供できるようになっています.

型情報を提供するには, 以下のような形で eslint-define-config モジュールを拡張します. プラグインの作者はプラグイン側からなんらか提供するようにしておくとユーザーが喜ぶかもしれません.

declare module "eslint-define-config" {
  interface CustomRuleOptions {
    "my-plugin/my-rule": [{ myOption?: boolean }];
  }
}

とはいえ 2024-02 時点ではプラグインがこのような型情報を提供していることはおそらくほぼ無く, 一般的ないくつかのプラグインについては @eslint-types/* から型情報が提供されていたりします.

型情報がなくても補完や型検査がされないだけで, プラグインが使えないということにはなりませんので, あったら便利に使うくらいの気持ちでいるのが良いと思います. (実際のところ ESLint の設定はそんなに頻繁に書き換えるものではないので, 型情報があることによる利益はどうせ限定的.)

ところで

Flat Config ではユーザーが自由にプラグインの名前 (ルール名の prefix) を決めることができます.

export default defineFlatConfig([
  // ...
  {
    plugins: {
      "whatever": myPlugin,
    },
    rules: {
      "whatever/my-rule": "error",
    },
  },
  // ...
]);