Add eslint-plugin-react-refresh to react config (#293)

* feat: use eslint-plugin-react-refresh * Create rude-knives-cross.md Signed-off-by: Kentaro Suzuki <[email protected]> * chore: update snapshot (github-actions) --------- Signed-off-by: Kentaro Suzuki <[email protected]> Co-authored-by: actions-miku[bot] <185786754+actions-miku[bot]@users.noreply.github.com>
VirtualLiveLab · Oct 31, 2024 · 917a98f · 917a98f
1 parent fd1ac74
commit 917a98f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 22 deletions.
diff --git a/.changeset/rude-knives-cross.md b/.changeset/rude-knives-cross.md
@@ -0,0 +1,5 @@
+---
+"@virtual-live-lab/eslint-config": patch
+---
+
+Add eslint-plugin-react-refresh to react config
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -63,6 +63,7 @@
     "@types/node": "20.17.1",
     "@virtual-live-lab/tsconfig": "workspace:^",
     "@vitest/coverage-istanbul": "2.1.3",
+    "eslint-plugin-react-refresh": "^0.4.14",
     "tsup": "8.3.5",
     "vitest": "2.1.3"
   },

diff --git a/packages/eslint-config/src/base/react.ts b/packages/eslint-config/src/base/react.ts
@@ -1,4 +1,6 @@
 import react from "eslint-plugin-react";
+// @ts-expect-error eslint-plugin-react-refresh is not typed
+import reactRefresh from "eslint-plugin-react-refresh";
 import globals from "globals";
 import tseslint from "typescript-eslint";
 
@@ -20,6 +22,10 @@ const reactConfig = tseslint.config({
     },
   },
   name: "@virtual-live-lab/eslint-config/react",
+  plugins: {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    "react-refresh": reactRefresh,
+  },
   rules: {
     "react/button-has-type": "error",
     "react/iframe-missing-sandbox": "error",
@@ -28,6 +34,9 @@ const reactConfig = tseslint.config({
     "react/jsx-no-target-blank": ["error", { allowReferrer: true }],
     "react/prop-types": "off",
     "react/self-closing-comp": "error",
+    // TODO: 引数から option を受け取る api に変わったら, allowexportnames を設定できるようにする
+    // ref: https://github.com/ArnaudBarre/eslint-plugin-react-refresh?tab=readme-ov-file#allowexportnames-v044
+    "react-refresh/only-export-components": "warn",
   },
   settings: {
     react: {

diff --git a/packages/eslint-config/test/__snapshots__/snapshot.test.ts.snap b/packages/eslint-config/test/__snapshots__/snapshot.test.ts.snap
@@ -4526,6 +4526,7 @@ exports[`Test ESLint config with snapshot > react preset > matches snapshot 1`]
     "@stylistic/ts",
     "react",
     "react-hooks",
+    "react-refresh",
     "jsx-a11y:[email protected]",
   ],
   "processor": undefined,
@@ -5511,6 +5512,9 @@ exports[`Test ESLint config with snapshot > react preset > matches snapshot 1`]
     "react-hooks/rules-of-hooks": [
       2,
     ],
+    "react-refresh/only-export-components": [
+      1,
+    ],
     "react/button-has-type": [
       2,
     ],

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml