Open3

ESLint Flat Config 導入メモ(ハマりポイントと良かった点)

Hideaki NoshiroHideaki Noshiro

パス指定があんまり融通が利かない。

files に絶対パスが使えない。 'src/**/*.{ts,tsx}'**/*.ts のような文字列だと動く。CLIオプションの方で対象ファイルは glob 指定できるので、ルールを適用したいファイルタイプを指定するという意味なのであれば extensions などの config プロパティである方が適切なのではないか?(ここに相対パスしか書けないというのは、API設計がイマイチであるか単にバグだと思う)

languageOptions.parserOptions.tsconfigRootDir や、ルール内オプションのパス指定( import/no-extraneous-dependencies ルールの packageDir )などに、余計な ../ があると動かなくなった。 path.resolvepath.normalize を使ってパスを正規化しないと認識してくれない(少なくとも VSCode 拡張ではこうしないとエラーが出ていた)。

Hideaki NoshiroHideaki Noshiro

ignore 設定のコツが分かってきた。 ignores だけは全体設定として別 config にするのが良さそう。

export default [
  { ignores: ["dist", "**/*.mjs"] },
  {
    ...
  },
  ...
];

以下のような設定だと、

export default [
  {
    files: ["**/*.mts"],
    ignores: ["dist", "**/*.mjs"],
    ...
  },
  ...
];

CLI 引数で指定した lint 対象パターンにマッチしてしまう mjs ファイルや dist のファイルに、デフォルトの config のようなもの↓

{
  "languageOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser": "espree@9.6.1",
    "parserOptions": {},
    "globals": {}
  },
  "plugins": [
    "@"
  ],
  "rules": {}
}

が動いてしまっているようで、余計な lint error ( eslint disable コメントで指定されているルールが定義されていない、など)が報告されてしまうことがある。

Hideaki NoshiroHideaki Noshiro

Flat Config を導入して特に良かった点

  • ディレクトリや拡張子ごとに異なるルール設定を行いたい場合などに config list に設定を追加していくだけで済むのが便利。
    • 旧型式の場合 config を分けることになりそうだがエディタで読み込むのが難しいので完全な解決策にならない。
    • mono repo 共通 eslint config に拡張子ごとの設定を書き、 workspace ごとの eslint.config.js にはディレクトリごとの設定を書く、といったことも柔軟に行いやすい。
  • ESM 形式で記述できる(ESMで記述したJSユーティリティを読み込んで config 記述に使用できる)