ESLint Flat Configに入門する

ESLint Flat Config

新しいESLintの設定ファイルのフォーマット。
従来のeslintrcの形式はv10.xで削除される。

設定ファイル

設定ファイルのファイル名としてはeslint.config.js, eslint.config.mjs, eslint.config.cjsが使える。
優先度もこの順番。

typescript-eslint

typescript-eslint未使用

必要なパッケージをインストールして…

pnpm add -D eslint

こう。

export default [
  {
    rules: {
      "no-var": "error",
      "no-console": ["warn", { allow: ["warn", "error"] }],
    },
  },
  {
    files: ["scripts/**/*", "packages/cli/**/*", "stories/**/*"],
    rules: {
      "no-console": "off",
    },
  },
]

typescript-eslint使用

必要なパッケージをインストールして…

pnpm add -D eslint typescript-eslint

こう。

import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    rules: {
      "no-var": "error",
      "no-console": ["warn", { allow: ["warn", "error"] }],
    },
  },
  {
    files: ["scripts/**/*", "packages/cli/**/*", "stories/**/*"],
    rules: {
      "no-console": "off",
    },
  },
);

詳しい使い方はこれを読む。

ESLint Config Inspector

ESLintの設定がどのように反映されているのか、UIを通じて確認できるようになった。

eslint --inspect-config

または

npm

bash npx eslint @eslint/config-inspector

pnpm

bash pnpm dlx @eslint/config-inspector

元ネタ：Introducing ESLint Config Inspector

参考リンク

• ESLintのeslintrcをFlat Configに移行してみた
• 新卒エンジニアがESLintのFlat Config移行と格闘した話
• ESLint を eslintrc から Flat Config に移行する、ハマりポイントを添えて。
• ESLintのFlat Config移行でやって良かったこと