Migrate into eslint v9 (#159)

* update eslint ver * fix: use new type * migrate into eslint v9 config * chore: changeset
VirtualLiveLab · Aug 13, 2024 · d4a9273 · d4a9273
1 parent 50c2212
commit d4a9273
Show file tree

Hide file tree

Showing 18 changed files with 376 additions and 323 deletions.
diff --git a/.changeset/clean-wombats-join.md b/.changeset/clean-wombats-join.md
@@ -0,0 +1,5 @@
+---
+"@virtual-live-lab/eslint-config": minor
+---
+
+update to eslint v9, typescript-eslint v8
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,7 +11,6 @@
     "typescript",
     "typescriptreact"
   ],
-  "eslint.experimental.useFlatConfig": true,
   "eslint.options": {
     "overrideConfigFile": "eslint.config.mjs"
   },

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@virtual-live-lab/prettier-config": "workspace:^",
     "@virtual-live-lab/stylelint-config": "workspace:^",
     "@virtual-live-lab/tsconfig": "workspace:^",
-    "eslint": "^8.57.0",
+    "eslint": "^9.9.0",
     "prettier": "^3.3.3",
     "stylelint": "^16.8.1",
     "typescript": "5.5.4"

diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -25,32 +25,37 @@
   "scripts": {
     "build": "tsup-node"
   },
+  "engines": {
+    "node": ">= 20.11.0 || >= 21.2.0 || >= 22.0.0"
+  },
   "peerDependencies": {
-    "eslint": "^8.57.0"
+    "eslint": "^9.9.0"
   },
   "dependencies": {
+    "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^8.57.0",
-    "eslint": "^8.57.0",
+    "@eslint/js": "^9.9.0",
+    "eslint": "^9.9.0",
     "eslint-config-flat-gitignore": "^0.1.8",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-astro": "^1.2.3",
     "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-perfectionist": "^2.11.0",
+    "eslint-plugin-perfectionist": "^3.1.3",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "globals": "^15.9.0",
     "pkg-dir": "^8.0.0",
-    "typescript-eslint": "^7.18.0"
+    "typescript-eslint": "^8.1.0"
   },
   "devDependencies": {
-    "@types/eslint": "^8.56.11",
+    "@stylistic/eslint-plugin-ts": "^2.6.2",
+    "@types/eslint": "^9.6.0",
+    "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint__eslintrc": "^2.1.2",
     "@types/eslint__js": "^8.42.3",
-    "@types/eslint-config-prettier": "^6.11.3",
     "@types/node": "^20.14.15",
-    "@typescript-eslint/utils": "^7.18.0",
+    "@typescript-eslint/utils": "^8.1.0",
     "@virtual-live-lab/tsconfig": "workspace:^",
     "tsup": "^8.2.4"
   },

diff --git a/packages/eslint-config/src/addons/jsxA11y.ts b/packages/eslint-config/src/addons/jsxA11y.ts
@@ -1,5 +1,11 @@
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
+
+import { fixupConfigRules } from "@eslint/compat";
+
 import { compat } from "../lib/compat";
 
-const jsxA11y = compat.extends("plugin:jsx-a11y/strict");
+const jsxA11y = fixupConfigRules(
+  compat.extends("plugin:jsx-a11y/strict"),
+) satisfies FlatConfig.ConfigArray;
 
 export default jsxA11y;
diff --git a/packages/eslint-config/src/addons/tailwind.ts b/packages/eslint-config/src/addons/tailwind.ts
@@ -1,27 +1,33 @@
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
+
+import { fixupConfigRules } from "@eslint/compat";
+
 import { compat } from "../lib/compat";
 
 const tailwind = [
-  ...compat.extends("plugin:tailwindcss/recommended"),
-  ...compat.config({
-    /*
-    tailwind-variantsを併用する際に、`ignoredKeys`に
-    `responsiveVariants`が追加されていないのでWarningが出る
-    そのため、こちら側で`ignoredKeys`に`responsiveVariants`を追加している
-    本家にPRを送るのでMergeされたらいらなくなる
-    */
-    rules: {
-      "tailwindcss/no-custom-classname": [
-        "warn",
-        {
-          ignoredKeys: [
-            "compoundVariants",
-            "defaultVariants",
-            "responsiveVariants",
-          ],
-        },
-      ],
-    },
-  }),
-];
+  ...fixupConfigRules(compat.extends("plugin:tailwindcss/recommended")),
+  ...fixupConfigRules(
+    compat.config({
+      /*
+      tailwind-variantsを併用する際に、`ignoredKeys`に
+      `responsiveVariants`が追加されていないのでWarningが出る
+      そのため、こちら側で`ignoredKeys`に`responsiveVariants`を追加している
+      本家にPRを送るのでMergeされたらいらなくなる
+      */
+      rules: {
+        "tailwindcss/no-custom-classname": [
+          "warn",
+          {
+            ignoredKeys: [
+              "compoundVariants",
+              "defaultVariants",
+              "responsiveVariants",
+            ],
+          },
+        ],
+      },
+    }),
+  ),
+] satisfies FlatConfig.ConfigArray;
 
 export default tailwind;
diff --git a/packages/eslint-config/src/base/astro.ts b/packages/eslint-config/src/base/astro.ts
@@ -1,12 +1,14 @@
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
 import type { Linter } from "eslint";
 
 import eslintPluginAstro from "eslint-plugin-astro";
 
-const astroConfig: Linter.FlatConfig[] = [
-  ...eslintPluginAstro.configs["flat/recommended"],
+const astroConfig = [
+  // eslint-plugin-astroの型定義の都合上anyと判定されてしまうので、asを使って型を指定する
+  ...(eslintPluginAstro.configs["flat/recommended"] as Linter.Config[]),
   // flat/jsx-a11y-strictは、eslint-plugin-jsx-a11yの設定をベースにしているので、
   // インストールされていないとエラーになるが、このパッケージはdependenciesに含まれているので問題ない
-  ...eslintPluginAstro.configs["flat/jsx-a11y-strict"],
-];
+  ...(eslintPluginAstro.configs["flat/jsx-a11y-strict"] as Linter.Config[]),
+] satisfies FlatConfig.ConfigArray;
 
 export { astroConfig };
diff --git a/packages/eslint-config/src/base/js.ts b/packages/eslint-config/src/base/js.ts
@@ -1,8 +1,11 @@
-import type { Linter } from "eslint";
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
 
 import js from "@eslint/js";
 import gitignore from "eslint-config-flat-gitignore";
 
-const jsConfig: Linter.FlatConfig[] = [gitignore(), js.configs.recommended];
+const jsConfig = [
+  gitignore(),
+  js.configs.recommended,
+] satisfies FlatConfig.ConfigArray;
 
 export { jsConfig };
diff --git a/packages/eslint-config/src/base/nextjs.ts b/packages/eslint-config/src/base/nextjs.ts
@@ -1,9 +1,11 @@
-import type { Linter } from "eslint";
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
+
+import { fixupConfigRules } from "@eslint/compat";
 
 import { compat } from "../lib/compat";
 import { reactConfig } from "./react";
 
-const nextJsConfig: Linter.FlatConfig[] = [
+const nextJsConfig = [
   ...reactConfig,
   /*
    この設定は、利用側のnode_modulesからnext/core-web-vitalsを探すので、
@@ -12,7 +14,7 @@ const nextJsConfig: Linter.FlatConfig[] = [
   Flat対応に際して、このpackageでeslint-config-nextを持ちたくないので、
   Next.jsプリセットを削除するBreaking Changeを行う可能性が高い
   */
-  ...compat.extends("next/core-web-vitals"),
-];
+  ...fixupConfigRules(compat.extends("next/core-web-vitals")),
+] satisfies FlatConfig.ConfigArray;
 
 export { nextJsConfig };
diff --git a/packages/eslint-config/src/base/react.ts b/packages/eslint-config/src/base/react.ts
@@ -1,38 +1,32 @@
-import type { Linter } from "eslint";
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
 
-//@ts-expect-error no types
-import react from "eslint-plugin-react";
-//@ts-expect-error no types
-import reactRecommended from "eslint-plugin-react/configs/recommended.js";
+import { fixupConfigRules } from "@eslint/compat";
 import globals from "globals";
 
 import { compat } from "../lib/compat";
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const reactConfig: Linter.FlatConfig[] = [
-  ...compat.extends("plugin:react-hooks/recommended"),
-  {
-    files: ["**/*.{js,cjs,mjs,ts,cts,mts,jsx,tsx}"],
-    ...reactRecommended,
-    languageOptions: {
+
+const reactConfig = [
+  ...fixupConfigRules([
+    ...compat.extends(
+      "plugin:react/recommended",
+      "plugin:react/jsx-runtime",
+      "plugin:react-hooks/recommended",
+    ),
+    ...compat.config({
       globals: {
         ...globals.browser,
       },
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
+      rules: {
+        "react/jsx-boolean-value": "warn",
+        "react/jsx-curly-brace-presence": "error",
+      },
+      settings: {
+        react: {
+          version: "detect",
         },
       },
-    },
-    plugins: {
-      // no types
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      react,
-    },
-    rules: {
-      "react/jsx-boolean-value": "warn",
-      "react/jsx-curly-brace-presence": "error",
-    },
-  },
-];
+    }),
+  ]),
+] satisfies FlatConfig.ConfigArray;
 
 export { reactConfig };
diff --git a/packages/eslint-config/src/base/stylistic.ts b/packages/eslint-config/src/base/stylistic.ts
@@ -1,42 +1,38 @@
-import type { Linter } from "eslint";
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
 
 import prettierConfig from "eslint-config-prettier";
-// @ts-expect-error no types
-import perfectionistNatural from "eslint-plugin-perfectionist/configs/recommended-natural";
+import perfectionistPlugin from "eslint-plugin-perfectionist";
 
-// eslint-plugin-perfectionist has no types
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const stylisticConfig: Linter.FlatConfig[] = [
+const stylisticConfig = [
   prettierConfig,
-  perfectionistNatural,
+  perfectionistPlugin.configs["recommended-natural"],
   {
     rules: {
       "perfectionist/sort-object-types": [
         "error",
         {
-          "order": "asc",
-          "partition-by-new-line": true,
-          "type": "natural",
+          order: "asc",
+          partitionByNewLine: true,
+          type: "natural",
         },
       ],
       "perfectionist/sort-objects": [
         "error",
         {
-          "order": "asc",
-          "partition-by-new-line": true,
-          "type": "natural",
+          order: "asc",
+          partitionByNewLine: true,
+          type: "natural",
         },
       ],
       "perfectionist/sort-union-types": [
         "error",
         {
-          "nullable-last": true,
-          "order": "asc",
-          "type": "natural",
+          order: "asc",
+          type: "natural",
         },
       ],
     },
   },
-];
+] satisfies FlatConfig.ConfigArray;
 
 export { stylisticConfig };
diff --git a/packages/eslint-config/src/base/typescript.ts b/packages/eslint-config/src/base/typescript.ts
@@ -1,20 +1,28 @@
+import stylisticTs from "@stylistic/eslint-plugin-ts";
+import gitignore from "eslint-config-flat-gitignore";
 import tseslint from "typescript-eslint";
 
-import { __dirname } from "../lib/dir";
-
 const tsConfig = tseslint.config({
   extends: [
+    gitignore(),
     ...tseslint.configs.recommendedTypeChecked,
     ...tseslint.configs.stylisticTypeChecked,
   ],
   languageOptions: {
     parserOptions: {
-      project: true,
-      tsconfigRootDir: __dirname,
+      projectService: {
+        allowDefaultProject: ["*.js", "*.mjs", "*.cjs"],
+      },
+      tsconfigRootDir: import.meta.dirname,
     },
   },
+  plugins: {
+    "@stylistic/ts": stylisticTs,
+  },
   rules: {
     // SEE: https://zenn.dev/cybozu_frontend/articles/ts-eslint-v6-guide
+    // v6 で recommended から削除されたものを有効化
+    "@stylistic/ts/no-extra-semi": "error",
     // stylistic を有効にしたため v5 の recommended にないルールを無効化
     "@typescript-eslint/array-type": "off",
     "@typescript-eslint/ban-tslint-comment": "off",
@@ -27,8 +35,6 @@ const tsConfig = tseslint.config({
     "@typescript-eslint/no-confusing-non-null-assertion": "off",
     // v6 で recommended に追加されたルールを無効化
     "@typescript-eslint/no-duplicate-enum-values": "off",
-    // v6 で recommended から削除されたものを有効化
-    "@typescript-eslint/no-extra-semi": "error",
     "@typescript-eslint/no-import-type-side-effects": "error",
     // this is for react-hook-form
     "@typescript-eslint/no-misused-promises": [

diff --git a/packages/eslint-config/src/presets/astro.ts b/packages/eslint-config/src/presets/astro.ts
@@ -1,15 +1,15 @@
-import type { TSESLint } from "@typescript-eslint/utils";
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
 
 import tseslint from "typescript-eslint";
 
 import { astroConfig } from "../base/astro";
 import { reactConfig } from "../base/react";
 import ts from "./ts";
 
-const astro: TSESLint.FlatConfig.ConfigArray = tseslint.config(
+const astro = tseslint.config(
   ...ts,
   ...astroConfig,
   ...reactConfig,
-);
+) satisfies FlatConfig.ConfigArray;
 
 export default astro;
diff --git a/packages/eslint-config/src/presets/js.ts b/packages/eslint-config/src/presets/js.ts
@@ -1,6 +1,8 @@
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
+
 import { jsConfig } from "../base/js";
 import { stylisticConfig } from "../base/stylistic";
 
-const js = [...jsConfig, ...stylisticConfig];
+const js = [...jsConfig, ...stylisticConfig] satisfies FlatConfig.ConfigArray;
 
 export default js;
diff --git a/packages/eslint-config/src/presets/nextjs.ts b/packages/eslint-config/src/presets/nextjs.ts
@@ -1,13 +1,13 @@
-import type { TSESLint } from "@typescript-eslint/utils";
+import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
 
 import tseslint from "typescript-eslint";
 
 import { nextJsConfig } from "../base/nextjs";
 import ts from "./ts";
 
-const react: TSESLint.FlatConfig.ConfigArray = tseslint.config(
+const react = tseslint.config(
   ...ts,
   ...nextJsConfig,
-);
+) satisfies FlatConfig.ConfigArray;
 
 export default react;