feat: add rules for react code (!4)

Reviewed-on: https://codeberg.org/nhcarrigan/eslint-config/pulls/4
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

package.json

@@ -42,13 +42,17 @@
     "eslint-plugin-jsdoc": "48.8.3",
     "eslint-plugin-playwright": "1.6.2",
     "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-react": "7.36.1",
     "eslint-plugin-sort-keys-fix": "1.1.2",
     "eslint-plugin-unicorn": "55.0.0",
     "globals": "15.8.0"
   },
   "peerDependencies": {
     "eslint": ">=9",
-    "typescript": ">=5"
+    "typescript": ">=5",
+    "react": ">=18",
+    "vitest": ">=2",
+    "playwright": ">=1"
   },
   "devDependencies": {
     "@nhcarrigan/prettier-config": "3.2.0",

src/index.ts

@@ -13,6 +13,8 @@ import deprecation from "eslint-plugin-deprecation";
 import importPlugin from "eslint-plugin-import";
 import jsdoc from "eslint-plugin-jsdoc";
 import playwright from "eslint-plugin-playwright";
+// @ts-expect-error There's no typedef...
+import react from "eslint-plugin-react";
 import sortKeysFix from "eslint-plugin-sort-keys-fix";
 import unicorn from "eslint-plugin-unicorn";
 import globals from "globals";
@@ -21,6 +23,7 @@ import { disabledEslintRules, eslintRules } from "./rules/eslint.js";
 import { importRules } from "./rules/import.js";
 import { jsdocRules } from "./rules/jsdoc.js";
 import { playwrightRules } from "./rules/playwright.js";
+import { reactRules } from "./rules/react.js";
 import { sortKeysFixRules } from "./rules/sortKeysFix.js";
 import { stylisticRules } from "./rules/stylistic.js";
 import { typescriptEslintRules, typescriptEslintRulesWithTypes }
@@ -35,9 +38,13 @@ const config: Array<Linter.Config> = [
     languageOptions: {
       globals: {
         ...globals.node,
+        ...globals.browser,
       },
       parser:        parser,
       parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
         ecmaVersion:     11,
         project:         true,
         sourceType:      "module",
@@ -53,6 +60,8 @@ const config: Array<Linter.Config> = [
       "jsdoc":              jsdoc,
       // @ts-expect-error I'm not sure what's going on here, to be honest.
       "playwright":         fixupPluginRules(playwright),
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- No typedef means it's unsafe...
+      "react":              react,
       "sort-keys-fix":      sortKeysFix as ESLint.Plugin,
       // @ts-expect-error They haven't typedef this yet because it technically doesn't support eslint9
       "stylistic":          fixupPluginRules(stylistic),
@@ -72,6 +81,7 @@ const config: Array<Linter.Config> = [
       ...sortKeysFixRules,
       ...vitestRules,
       ...playwrightRules,
+      ...reactRules,
     },
   },
   {

src/rules/react.ts

@@ -0,0 +1,87 @@
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import type { Linter } from "eslint";
+
+export const reactRules: Linter.RulesRecord = {
+  "react/boolean-prop-naming":                   "warn",
+  "react/button-has-type":                       "error",
+  "react/checked-requires-onchange-or-readonly": "error",
+  "react/default-props-match-prop-types":        "warn",
+  "react/destructuring-assignment":              "warn",
+  "react/display-name":                          "warn",
+  "react/forbid-foreign-prop-types":             "warn",
+  "react/forbid-prop-types":                     "warn",
+  "react/forward-ref-uses-ref":                  "warn",
+  "react/function-component-definition":
+    [ "warn",
+      {
+        namedComponents:   "arrow-function",
+        unnamedComponents: "arrow-function",
+      } ],
+  "react/hook-use-state":            "warn",
+  "react/iframe-missing-sandbox":    "error",
+  "react/jsx-boolean-value":         [ "warn", "always" ],
+  "react/jsx-child-element-spacing": "warn",
+  "react/jsx-filename-extension":
+    [ "warn", { allow: "as-needed", extensions: [ ".jsx", ".tsx" ] } ],
+  "react/jsx-fragments":                        [ "warn", "syntax" ],
+  "react/jsx-handler-names":                    "warn",
+  "react/jsx-key":                              "error",
+  "react/jsx-no-bind":                          "error",
+  "react/jsx-no-comment-textnodes":             "error",
+  "react/jsx-no-constructed-context-values":    "error",
+  "react/jsx-no-duplicate-props":               "error",
+  "react/jsx-no-leaked-render":                 "error",
+  "react/jsx-no-literals":                      "warn",
+  "react/jsx-no-script-url":                    "error",
+  "react/jsx-no-target-blank":                  "error",
+  "react/jsx-no-undef":                         "error",
+  "react/jsx-no-useless-fragment":              "warn",
+  "react/jsx-pascal-case":                      "warn",
+  "react/jsx-props-no-spread-multi":            "warn",
+  "react/jsx-sort-props":                       "warn",
+  "react/jsx-uses-vars":                        "warn",
+  "react/no-access-state-in-setstate":          "error",
+  "react/no-array-index-key":                   "error",
+  "react/no-arrow-function-lifecycle":          "warn",
+  "react/no-children-prop":                     "error",
+  "react/no-danger":                            "error",
+  "react/no-danger-with-children":              "error",
+  "react/no-deprecated":                        "warn",
+  "react/no-did-mount-set-state":               "error",
+  "react/no-did-update-set-state":              "error",
+  "react/no-direct-mutation-state":             "error",
+  "react/no-find-dom-node":                     "error",
+  "react/no-is-mounted":                        "error",
+  "react/no-multi-comp":                        "warn",
+  "react/no-object-type-as-default-prop":       "error",
+  "react/no-redundant-should-component-update": "warn",
+  "react/no-render-return-value":               "error",
+  "react/no-string-refs":                       "error",
+  "react/no-this-in-sfc":                       "error",
+  "react/no-typos":                             "warn",
+  "react/no-unescaped-entities":                "error",
+  "react/no-unknown-property":                  "error",
+  "react/no-unsafe":                            "warn",
+  "react/no-unstable-nested-components":        "warn",
+  "react/no-unused-class-component-methods":    "warn",
+  "react/no-unused-prop-types":                 "warn",
+  "react/no-unused-state":                      "warn",
+  "react/no-will-update-set-state":             "error",
+  "react/prefer-es6-class":                     "warn",
+  "react/prefer-read-only-props":               "error",
+  "react/prefer-stateless-function":            "warn",
+  "react/prop-types":                           "warn",
+  "react/require-default-props":                "warn",
+  "react/require-render-return":                "error",
+  "react/self-closing-comp":
+    [ "warn", { component: false, html: false } ],
+  "react/state-in-constructor":          "warn",
+  "react/static-property-placement":     "warn",
+  "react/style-prop-object":             "warn",
+  "react/void-dom-elements-no-children": "error",
+};

test/off.spec.ts

@@ -13,6 +13,7 @@ import { stylisticRules } from "../src/rules/stylistic.ts";
 import { typescriptEslintRules } from "../src/rules/typescriptEslint.js";
 import { unicornRules } from "../src/rules/unicorn.js";
 import { vitestRules } from "../src/rules/vitest.js";
+import { reactRules } from "../prod/rules/react.js";
 
 describe("no rules should be turned off in", () => {
   it("eslint rules", () => {
@@ -55,6 +56,16 @@ describe("no rules should be turned off in", () => {
     }
   });
 
+  it("react rules", () => {
+    expect.assertions(70);
+    const rules = Object.entries(reactRules);
+    for (const [ name, rule ] of rules) {
+      expect(Array.isArray(rule)
+        ? rule.at(0)
+        : rule, `${name} appears to be turned off - this project does not use any external configs, so all rules should be off by default.`).not.toBe("off");
+    }
+  });
+
   it("stylistic rules", () => {
     expect.assertions(65);
     const rules = Object.entries(stylisticRules);