docs: update readme of each plugin

Rel1cx · Rel1cx · commit da46c1f4e531 · 2025-02-23T07:16:05.000+08:00
diff --git a/packages/plugins/eslint-plugin-react-debug/README.md b/packages/plugins/eslint-plugin-react-debug/README.md
@@ -6,32 +6,37 @@ Debugging rules.
 
 ```sh
 # npm
-npm install --save-dev eslint-plugin-react-dom
+npm install --save-dev eslint-plugin-react-debug
 ```
 
 ## Setup
 
 ```js
-// @ts-check
+// eslint.config.js
 
+// @ts-check
 import js from "@eslint/js";
 import reactDebug from "eslint-plugin-react-debug";
-
-export default [
-  js.configs.recommended,
-  {
-    files: ["**/*.{ts,tsx}"],
-    plugins: {
-      "react-debug": reactDebug,
-    },
-    rules: {
-      "react-debug/class-component": "warn",
-      "react-debug/function-component": "warn",
-      "react-debug/hook": "warn",
-      "react-debug/is-from-react": "off",
+import tseslint from "typescript-eslint";
+
+export default tseslint.config({
+  files: ["**/*.ts", "**/*.tsx"],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+    reactDebug.configs.all,
+  ],
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      projectService: true,
     },
   },
-];
+  rules: {
+    // Put rules you want to override here
+    "react-debug/function-component": "warn",
+  },
+});
 ```
 
 ## Rules
diff --git a/packages/plugins/eslint-plugin-react-dom/README.md b/packages/plugins/eslint-plugin-react-dom/README.md
@@ -12,35 +12,31 @@ npm install --save-dev eslint-plugin-react-dom
 ## Setup
 
 ```js
-// @ts-check
+// eslint.config.js
 
+// @ts-check
 import js from "@eslint/js";
-import reactDOM from "eslint-plugin-react-dom";
-
-export default [
-  js.configs.recommended,
-  {
-    files: ["**/*.{ts,tsx}"],
-    plugins: {
-      "react-dom": reactDOM,
-    },
-    rules: {
-      // react-dom recommended rules
-      "react-dom/no-dangerously-set-innerhtml-with-children": "error",
-      "react-dom/no-dangerously-set-innerhtml": "warn",
-      "react-dom/no-find-dom-node": "error",
-      "react-dom/no-missing-button-type": "warn",
-      "react-dom/no-missing-iframe-sandbox": "warn",
-      "react-dom/no-namespace": "error",
-      "react-dom/no-render-return-value": "error",
-      "react-dom/no-script-url": "warn",
-      "react-dom/no-unknown-property": "warn",
-      "react-dom/no-unsafe-iframe-sandbox": "warn",
-      "react-dom/no-unsafe-target-blank": "warn",
-      "react-dom/no-void-elements-with-children": "warn",
+import reactDom from "eslint-plugin-react-dom";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config({
+  files: ["**/*.ts", "**/*.tsx"],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+    reactDom.configs.recommended,
+  ],
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      projectService: true,
     },
   },
-];
+  rules: {
+    // Put rules you want to override here
+    "react-dom/no-dangerously-set-innerhtml": "warn",
+  },
+});
 ```
 
 ## Rules
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/README.md b/packages/plugins/eslint-plugin-react-hooks-extra/README.md
@@ -12,26 +12,31 @@ npm install --save-dev eslint-plugin-react-hooks-extra
 ## Setup
 
 ```js
-// @ts-check
+// eslint.config.js
 
+// @ts-check
 import js from "@eslint/js";
 import reactHooksExtra from "eslint-plugin-react-hooks-extra";
-
-export default [
-  js.configs.recommended,
-  {
-    files: ["**/*.{ts,tsx}"],
-    plugins: {
-      "react-hooks-extra": reactHooksExtra,
-    },
-    rules: {
-      // react-hooks-extra recommended rules
-      "react-hooks-extra/no-direct-set-state-in-use-effect": "warn",
-      "react-hooks-extra/no-useless-custom-hooks": "warn",
-      "react-hooks-extra/prefer-use-state-lazy-initialization": "warn",
+import tseslint from "typescript-eslint";
+
+export default tseslint.config({
+  files: ["**/*.ts", "**/*.tsx"],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+    reactHooksExtra.configs.recommended,
+  ],
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      projectService: true,
     },
   },
-];
+  rules: {
+    // Put rules you want to override here
+    "react-hooks-extra/no-useless-custom-hooks": "warn",
+  },
+});
 ```
 
 ## Rules
diff --git a/packages/plugins/eslint-plugin-react-naming-convention/README.md b/packages/plugins/eslint-plugin-react-naming-convention/README.md
@@ -12,25 +12,33 @@ npm install --save-dev eslint-plugin-react-naming-convention
 ## Setup
 
 ```js
-// @ts-check
+// eslint.config.js
 
+// @ts-check
 import js from "@eslint/js";
 import reactNamingConvention from "eslint-plugin-react-naming-convention";
-
-export default [
-  js.configs.recommended,
-  {
-    files: ["**/*.{ts,tsx}"],
-    plugins: {
-      "react-naming-convention": reactNamingConvention,
-    },
-    rules: {
-      // react-naming-convention recommended rules
-      "react-naming-convention/filename-extension": ["warn", "as-needed"],
-      "react-naming-convention/use-state": "warn",
+import tseslint from "typescript-eslint";
+
+export default tseslint.config({
+  files: ["**/*.ts", "**/*.tsx"],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+  ],
+  plugins: {
+    "react-naming-convention": reactNamingConvention,
+  },
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      projectService: true,
     },
   },
-];
+  rules: {
+    // Put rules you want to use here
+    "react-naming-convention/component-name": "warn",
+  },
+});
 ```
 
 ## Rules
diff --git a/packages/plugins/eslint-plugin-react-web-api/README.md b/packages/plugins/eslint-plugin-react-web-api/README.md
@@ -12,27 +12,31 @@ npm install --save-dev eslint-plugin-react-web-api
 ## Setup
 
 ```js
-// @ts-check
+// eslint.config.js
 
+// @ts-check
 import js from "@eslint/js";
-import reactWebAPI from "eslint-plugin-react-web-api";
-
-export default [
-  js.configs.recommended,
-  {
-    files: ["**/*.{ts,tsx}"],
-    plugins: [
-      "react-web-api": reactWebAPI,
-      rules: {
-        // react-web-api recommended rules
-        "react-web-api/no-leaked-event-listener": "warn",
-        "react-web-api/no-leaked-interval": "warn",
-        "react-web-api/no-leaked-resize-observer": "warn",
-        "react-web-api/no-leaked-timeout": "warn",
-      }
-    ],
+import reactWebApi from "eslint-plugin-react-web-api";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config({
+  files: ["**/*.ts", "**/*.tsx"],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+    reactWebApi.configs.recommended,
+  ],
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      projectService: true,
+    },
+  },
+  rules: {
+    // Put rules you want to override here
+    "react-web-api/no-leaked-event-listener": "warn",
   },
-];
+});
 ```
 
 ## Rules
diff --git a/packages/plugins/eslint-plugin-react-x/README.md b/packages/plugins/eslint-plugin-react-x/README.md
@@ -12,61 +12,31 @@ npm install --save-dev eslint-plugin-react-x
 ## Setup
 
 ```js
-// @ts-check
+// eslint.config.js
 
+// @ts-check
 import js from "@eslint/js";
 import reactx from "eslint-plugin-react-x";
-
-export default [
-  js.configs.recommended,
-  {
-    files: ["**/*.{ts,tsx}"],
-    plugins: {
-      "react-x": reactx,
-    },
-    rules: {
-      // react-x recommended rules
-      "react-x/ensure-forward-ref-using-ref": "warn",
-      "react-x/no-access-state-in-setstate": "error",
-      "react-x/no-array-index-key": "warn",
-      "react-x/no-children-count": "warn",
-      "react-x/no-children-for-each": "warn",
-      "react-x/no-children-map": "warn",
-      "react-x/no-children-only": "warn",
-      "react-x/no-children-to-array": "warn",
-      "react-x/no-clone-element": "warn",
-      "react-x/no-comment-textnodes": "warn",
-      "react-x/no-component-will-mount": "error",
-      "react-x/no-component-will-receive-props": "error",
-      "react-x/no-component-will-update": "error",
-      "react-x/no-context-provider": "warn",
-      "react-x/no-create-ref": "error",
-      "react-x/no-default-props": "error",
-      "react-x/no-direct-mutation-state": "error",
-      "react-x/no-duplicate-jsx-props": "warn",
-      "react-x/no-duplicate-key": "warn",
-      "react-x/no-forward-ref": "warn",
-      "react-x/no-implicit-key": "warn",
-      "react-x/no-missing-key": "error",
-      "react-x/no-nested-components": "error",
-      "react-x/no-prop-types": "error",
-      "react-x/no-redundant-should-component-update": "error",
-      "react-x/no-set-state-in-component-did-mount": "warn",
-      "react-x/no-set-state-in-component-did-update": "warn",
-      "react-x/no-set-state-in-component-will-update": "warn",
-      "react-x/no-string-refs": "error",
-      "react-x/no-unsafe-component-will-mount": "warn",
-      "react-x/no-unsafe-component-will-receive-props": "warn",
-      "react-x/no-unsafe-component-will-update": "warn",
-      "react-x/no-unstable-context-value": "warn",
-      "react-x/no-unstable-default-props": "warn",
-      "react-x/no-unused-class-component-members": "warn",
-      "react-x/no-unused-state": "warn",
-      "react-x/no-use-context": "warn",
-      "react-x/use-jsx-vars": "warn",
+import tseslint from "typescript-eslint";
+
+export default tseslint.config({
+  files: ["**/*.ts", "**/*.tsx"],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+    reactx.configs.recommended,
+  ],
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      projectService: true,
     },
   },
-];
+  rules: {
+    // Put rules you want to override here
+    "react-x/prefer-shorthand-boolean": "warn",
+  },
+});
 ```
 
 ## Rules
