@tb-dev/eslint-config 6.0.6 → 6.1.0

package/README.md

@@ -1,6 +1,3 @@
 # @tb-dev/eslint-config
 
 Opinionated config for ESLint.
-
-- TypeScript only.
-- Optional Vue support.

package/dist/index.cjs

@@ -39,6 +39,12 @@ function isEnabled(config, feature) {
   switch (feature) {
     case "perfectionist":
       return config?.perfectionist ?? true;
+    case "react":
+      return config?.react ?? false;
+    case "reactCompiler":
+      return config?.reactCompiler ?? config?.react ?? false;
+    case "reactHooks":
+      return config?.reactHooks ?? config?.react ?? false;
     case "svelte":
       return config?.svelte ?? false;
     case "tailwind":
@@ -287,6 +293,55 @@ async function vue(options) {
   ];
 }
 
+async function react(options) {
+  if (!isEnabled(options.features, "react")) return {};
+  const plugin = await interopDefault(import('eslint-plugin-react'));
+  return {
+    plugins: { react: plugin },
+    rules: {
+      "react/button-has-type": "error",
+      "react/function-component-definition": [
+        "error",
+        {
+          namedComponents: "function-expression",
+          unnamedComponents: "function-expression"
+        }
+      ],
+      "react/hook-use-state": ["error", { allowDestructuredState: true }],
+      "react/jsx-boolean-value": ["error", "never", { assumeUndefinedIsFalse: true }],
+      "react/jsx-key": [
+        "error",
+        {
+          checkFragmentShorthand: true,
+          checkKeyMustBeforeSpread: false,
+          warnOnDuplicates: true
+        }
+      ],
+      "react/jsx-no-script-url": "error",
+      "react/jsx-no-useless-fragment": "error",
+      "react/jsx-pascal-case": [
+        "error",
+        {
+          allowAllCaps: false,
+          allowNamespace: true,
+          allowLeadingUnderscore: false
+        }
+      ],
+      "react/jsx-props-no-spread-multi": "error",
+      "react/no-access-state-in-setstate": "error",
+      "react/no-array-index-key": "error",
+      "react/no-danger": "error",
+      "react/no-deprecated": "error",
+      "react/no-direct-mutation-state": "error",
+      "react/no-find-dom-node": "error",
+      "react/no-is-mounted": "error",
+      "react/no-render-return-value": "error",
+      "react/no-unsafe": "error",
+      ...options.overrides?.react
+    }
+  };
+}
+
 async function svelte(options) {
   if (!isEnabled(options.features, "svelte")) return [];
   const [sveltePlugin, svelteParser, tsParser] = await Promise.all([
@@ -427,6 +482,11 @@ function javascript(options) {
     languageOptions: {
       ecmaVersion: "latest",
       sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: isEnabled(options.features, "react")
+        }
+      },
       globals: {
         ...globals.browser,
         ...globals.es2021,
@@ -850,7 +910,10 @@ async function typescript(options) {
       parserOptions: {
         project: options.project,
         tsconfigRootDir: process.cwd(),
-        extraFileExtensions
+        extraFileExtensions,
+        ecmaFeatures: {
+          jsx: isEnabled(options.features, "react")
+        }
       }
     },
     plugins: { "@typescript-eslint": tsPlugin },
@@ -967,6 +1030,7 @@ async function defineConfig(options) {
     typescript(options),
     ...await vue(options),
     ...await svelte(options),
+    react(options),
     perfectionist(options),
     unicorn(options),
     tailwind(options),

package/dist/index.d.ts

@@ -22,6 +22,9 @@ declare interface ConfigOptions {
     overrides?: {
         javascript?: Rules;
         perfectionist?: Rules;
+        react?: Rules;
+        reactCompiler?: Rules;
+        reactHooks?: Rules;
         svelte?: Rules;
         tailwind?: Rules;
         typescript?: Rules;
@@ -38,6 +41,12 @@ declare interface FeaturesObject {
     /** @default true */
     perfectionist?: boolean;
     /** @default false */
+    react?: boolean;
+    /** @default false */
+    reactCompiler?: boolean;
+    /** @default false */
+    reactHooks?: boolean;
+    /** @default false */
     svelte?: boolean;
     /** @default false */
     tailwind?: boolean;

package/dist/index.js

@@ -35,6 +35,12 @@ function isEnabled(config, feature) {
   switch (feature) {
     case "perfectionist":
       return config?.perfectionist ?? true;
+    case "react":
+      return config?.react ?? false;
+    case "reactCompiler":
+      return config?.reactCompiler ?? config?.react ?? false;
+    case "reactHooks":
+      return config?.reactHooks ?? config?.react ?? false;
     case "svelte":
       return config?.svelte ?? false;
     case "tailwind":
@@ -283,6 +289,55 @@ async function vue(options) {
   ];
 }
 
+async function react(options) {
+  if (!isEnabled(options.features, "react")) return {};
+  const plugin = await interopDefault(import('eslint-plugin-react'));
+  return {
+    plugins: { react: plugin },
+    rules: {
+      "react/button-has-type": "error",
+      "react/function-component-definition": [
+        "error",
+        {
+          namedComponents: "function-expression",
+          unnamedComponents: "function-expression"
+        }
+      ],
+      "react/hook-use-state": ["error", { allowDestructuredState: true }],
+      "react/jsx-boolean-value": ["error", "never", { assumeUndefinedIsFalse: true }],
+      "react/jsx-key": [
+        "error",
+        {
+          checkFragmentShorthand: true,
+          checkKeyMustBeforeSpread: false,
+          warnOnDuplicates: true
+        }
+      ],
+      "react/jsx-no-script-url": "error",
+      "react/jsx-no-useless-fragment": "error",
+      "react/jsx-pascal-case": [
+        "error",
+        {
+          allowAllCaps: false,
+          allowNamespace: true,
+          allowLeadingUnderscore: false
+        }
+      ],
+      "react/jsx-props-no-spread-multi": "error",
+      "react/no-access-state-in-setstate": "error",
+      "react/no-array-index-key": "error",
+      "react/no-danger": "error",
+      "react/no-deprecated": "error",
+      "react/no-direct-mutation-state": "error",
+      "react/no-find-dom-node": "error",
+      "react/no-is-mounted": "error",
+      "react/no-render-return-value": "error",
+      "react/no-unsafe": "error",
+      ...options.overrides?.react
+    }
+  };
+}
+
 async function svelte(options) {
   if (!isEnabled(options.features, "svelte")) return [];
   const [sveltePlugin, svelteParser, tsParser] = await Promise.all([
@@ -423,6 +478,11 @@ function javascript(options) {
     languageOptions: {
       ecmaVersion: "latest",
       sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: isEnabled(options.features, "react")
+        }
+      },
       globals: {
         ...globals.browser,
         ...globals.es2021,
@@ -846,7 +906,10 @@ async function typescript(options) {
       parserOptions: {
         project: options.project,
         tsconfigRootDir: process.cwd(),
-        extraFileExtensions
+        extraFileExtensions,
+        ecmaFeatures: {
+          jsx: isEnabled(options.features, "react")
+        }
       }
     },
     plugins: { "@typescript-eslint": tsPlugin },
@@ -963,6 +1026,7 @@ async function defineConfig(options) {
     typescript(options),
     ...await vue(options),
     ...await svelte(options),
+    react(options),
     perfectionist(options),
     unicorn(options),
     tailwind(options),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tb-dev/eslint-config",
-  "version": "6.0.6",
+  "version": "6.1.0",
   "description": "ESLint config",
   "license": "MIT",
   "type": "module",
@@ -17,18 +17,23 @@
     "eslint",
     "eslint-config",
     "typescript",
+    "react",
+    "svelte",
     "vue"
   ],
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
     "eslint-plugin-perfectionist": "^4.6.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-compiler": "19.0.0-beta-63e3235-20250105",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-svelte": "^3.0.0-next.10",
     "eslint-plugin-tailwindcss": "^3.17.5",
     "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.14.0",
-    "svelte": "^5.16.4",
+    "svelte": "^5.16.5",
     "svelte-eslint-parser": "^1.0.0-next.6",
     "vue-eslint-parser": "^9.4.3"
   },