eslint-config-matsuri 4.0.1 → 4.1.1

package/README.md

@@ -25,6 +25,7 @@ Flat configをv3からサポートしています。eslint.config.jsに次のよ
 ```js
 import config from "eslint-config-matsuri";
 
+/** @type { import("eslint").Linter.FlatConfig[] } */
 export default config
 ```
 
@@ -33,6 +34,7 @@ export default config
 ```js
 import config from "eslint-config-matsuri";
 
+/** @type { import("eslint").Linter.FlatConfig[] } */
 export default [
   ...config,
   {

package/index.js

@@ -9,8 +9,7 @@ import pluginReactHooks from "eslint-plugin-react-hooks";
 import pluginReactRefresh from "eslint-plugin-react-refresh";
 import pluginSortImports from "eslint-plugin-sort-imports-es6-autofix";
 import pluginUnusedImport from "eslint-plugin-unused-imports";
-import ts from "@typescript-eslint/eslint-plugin";
-import tsParser from "@typescript-eslint/parser";
+import tseslint from "typescript-eslint";
 
 /**
  * @see https://github.com/storybookjs/eslint-plugin-storybook/issues/135
@@ -20,9 +19,48 @@ const pluginStorybookRecommended = compat.extends(
   "plugin:storybook/recommended"
 );
 
+/**
+ * NOTE: typescript-eslintは、推奨設定をルール単位で返しておらず、parserOptionsやpluginなどを設定を含んだconfigの配列のみを返している。
+ * これを以前のESLintにおけるextendsのような記述できるようにするために、tseslint.configという関数を提供しているが、
+ * 記述が自明な上に、現状シンプルなケースでは問題が既存の設定を取り込むとエラーが見られるため、ルールのみを抽出して返す関数を作成した。
+ */
+const getRulesFromConfigArray = (configs) => {
+  return configs.reduce((rules, config) => {
+    return { ...rules, ...config.rules };
+  }, {});
+};
+const tseslintRecommendedTypeChckedRules = getRulesFromConfigArray(
+  tseslint.configs.recommendedTypeChecked
+);
+const tseslintStylisticTypeCheckedRules = getRulesFromConfigArray(
+  tseslint.configs.stylisticTypeChecked
+);
+
 /** @type { import("eslint").Linter.FlatConfig[] } */
 const config = [
   {
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    /**
+     * NOTE: pluginsをfilesと紐付けると、利用側でのルール変更が困難になる。
+     *
+     * Pluginをfilesを指定したconfigで読み込むとfilesと紐づいてしまうため、
+     * eslint-config-matsuriを利用する側でルールを上書きしようとした際に、filesまたはpluginの再指定が必要になってしまう。
+     * また、pluginがlanguageOptionsなどに依存している場合、その指定も必要になる。
+     * さらには、eslint側のアップデートで、同じpluginを再指定するとエラーが出るようになった。
+     * このため、pluginをfiles指定なしで、まとめて読み込んでおく。
+     */
+    plugins: {
+      "sort-imports-es6-autofix": pluginSortImports,
+      "@typescript-eslint": tseslint.plugin,
+      "unused-imports": pluginUnusedImport,
+      "css-reorder": pluginCssReorder,
+      "jsx-a11y": pluginJsxA11y,
+      react: pluginReact,
+      "react-hooks": pluginReactHooks,
+      "react-refresh": pluginReactRefresh,
+    },
     ignores: [
       "**/node_modules",
       "**/public",
@@ -45,9 +83,6 @@ const config = [
     ],
   },
   {
-    linterOptions: {
-      reportUnusedDisableDirectives: true,
-    },
     languageOptions: {
       ecmaVersion: "latest",
       sourceType: "module",
@@ -57,9 +92,6 @@ const config = [
         ...globals.node,
       },
     },
-    plugins: {
-      "sort-imports-es6-autofix": pluginSortImports,
-    },
     rules: {
       ...js.configs.recommended.rules,
       "no-console": ["error", { allow: ["error", "warn"] }],
@@ -87,7 +119,7 @@ const config = [
         React: true,
         JSX: true,
       },
-      parser: tsParser,
+      parser: tseslint.parser,
       parserOptions: {
         project: true,
       },
@@ -97,21 +129,12 @@ const config = [
         version: "detect",
       },
     },
-    plugins: {
-      "@typescript-eslint": ts,
-      "unused-imports": pluginUnusedImport,
-      "css-reorder": pluginCssReorder,
-      "jsx-a11y": pluginJsxA11y,
-      react: pluginReact,
-      "react-hooks": pluginReactHooks,
-      "react-refresh": pluginReactRefresh,
-    },
     rules: {
+      ...tseslintRecommendedTypeChckedRules,
+      ...tseslintStylisticTypeCheckedRules,
       ...pluginReact.configs.recommended.rules,
       ...pluginReactHooks.configs.recommended.rules,
       ...pluginReact.configs["jsx-runtime"].rules,
-      ...ts.configs["recommended-type-checked"].rules,
-      ...ts.configs["stylistic-type-checked"].rules,
       ...pluginJsxA11y.configs.recommended.rules,
       ...pluginPrettier.rules,
       "css-reorder/property-reorder": "error",
@@ -191,6 +214,14 @@ const config = [
       // 字幕を付加することはあまり想定されず、無意味なtrack要素の挿入を招くため無効化する
       "jsx-a11y/media-has-caption": "off",
 
+      "jsx-a11y/label-has-associated-control": [
+        "error",
+        {
+          // デフォルトの2だと、そこそこラベルのテキストが検知できないケースがあるため。
+          depth: 7,
+        },
+      ],
+
       /**
        * settings for unused-imports
        */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-matsuri",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -23,17 +23,8 @@
   "peerDependencies": {
     "eslint": "^8.43.0"
   },
-  "devDependencies": {
-    "@emotion/react": "11.11.3",
-    "@types/react": "18.2.57",
-    "eslint": "8.56.0",
-    "react": "18.2.0",
-    "typescript": "5.3.3"
-  },
   "dependencies": {
-    "@eslint/js": "8.56.0",
-    "@typescript-eslint/eslint-plugin": "7.0.2",
-    "@typescript-eslint/parser": "7.0.2",
+    "@eslint/js": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-css-reorder": "0.5.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
@@ -43,6 +34,7 @@
     "eslint-plugin-sort-imports-es6-autofix": "0.6.0",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-unused-imports": "3.1.0",
-    "globals": "14.0.0"
+    "globals": "14.0.0",
+    "typescript-eslint": "7.1.1"
   }
 }