Zenn
📚

ESLint Flat Configを使ってみた(課題あり)

2023/04/15に公開
Node.js
ESLint
JavaScript
tech

動機

ドクセル | ESLint Flat Configで誰もが簡単に Lintを設定できる時代へ
Flat Config導入完了！　新しいESLintの設定フォーマットを使ってみた

公式ドキュメント

https://eslint.org/docs/latest/use/configure/configuration-files-new

設定手順

有効にする方法は2通り

  • eslint.config.js ファイルをプロジェクト直下に作成
  • 環境変数 ESLINT_USE_FLAT_CONFIG=true にする

VSCodeのESLint拡張でも有効にする必要がある

拡張機能は2.4.0でFlat Configをサポートしたようです。

https://marketplace.visualstudio.com/items/dbaeumer.vscode-eslint/changelog

ESLint拡張機能上でもexperimentalな機能なので、VSCodeのsettings.json に追記して有効にします。

"eslint.experimental.useFlatConfig": true

設定ファイル

(旧)移行前の設定ファイル(.eslintrc.json)

{
  "rules": { "prefer-const": "error", "semi": "error" }
}

(新)Flat Configeslint.config.jsの形式

新形式で書き換えてみる

CommonJSも使えます。

export default [
	{
		rules: {
			semi: "error",
			"prefer-const": "error"
		}
	}
];

Lintの対象となるファイルを指定する

files を指定することで、対象ファイルを追加できます。

export default [
	{
		// 全てのTSファイルを対象にする
		files: ["**/*.ts"],
		rules: {
			semi: "error",
			"prefer-const": "error"
		}
	}
];

ignores を指定すると、Lintの対象から外すことができます。

さまざまな除外パターンが公式ドキュメントに記載されてますのでカスタマイズする時は参考になります。

export default [
	{
		files: ["**/*.ts"],
		// 除外するファイル
		ignores: ["**/*.config.ts"],
		rules: {
			semi: "error",
			"prefer-const": "error"
		}
	}
];

Reactへの適用や、本番運用はまだ見送りかな〜〜〜

特にPhase3の完了が待たれます

https://github.com/eslint/eslint/issues/13481

Discussion