eslint-config-agent 1.3.6 → 1.3.7

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. See [Conven
 
 
 
+## [1.3.7](https://github.com/tupe12334/eslint-config/compare/v1.3.6...v1.3.7) (2025-09-24)
+
+### Features
+
+* add error handling rules from eslint-plugin-error ([082701f](https://github.com/tupe12334/eslint-config/commit/082701f8abe8730ed12afe206caf8f10825b4d1c))
+* add jsx-classname-required rule to enforce className attribute on HTML elements in JSX ([3603865](https://github.com/tupe12334/eslint-config/commit/360386582f05e63d6ba1625548725b9216c4f4d6))
+* integrate error handling rules from eslint-plugin-error and update configuration ([7c8b846](https://github.com/tupe12334/eslint-config/commit/7c8b84694550b92ac2a265591fac736d5ddb1180))
+
 ## [1.3.6](https://github.com/tupe12334/eslint-config/compare/v1.3.5...v1.3.6) (2025-09-21)
 
 ### Bug Fixes

package/index.js

@@ -12,6 +12,7 @@ import storybookPlugin from "eslint-plugin-storybook";
 import globals from "globals";
 import allRules from "./rules/index.js";
 import { noDefaultClassExportRule } from "./rules/no-default-class-export/index.js";
+import errorPlugin from "eslint-plugin-error";
 
 // Conditionally import preact plugin if available
 let preactPlugin = null;
@@ -40,6 +41,8 @@ const sharedRules = {
   "implicit-arrow-linebreak": "off",
   "arrow-body-style": "off",
   "no-continue": "off",
+  // Additional built-in error handling rules
+  "prefer-promise-reject-errors": "error",
 };
 
 // Shared no-restricted-syntax rules for both JS and TS
@@ -101,7 +104,6 @@ const sharedRestrictedSyntax = [
   ...allRules.noDefaultClassExportRules,
 ];
 
-
 // TypeScript-specific no-restricted-syntax rules
 const tsOnlyRestrictedSyntax = [
   {
@@ -189,9 +191,11 @@ const config = [
       "class-export": classExportPlugin,
       "single-export": singleExportPlugin,
       "required-exports": requiredExportsPlugin,
+      error: errorPlugin,
       custom: {
         rules: {
           "no-default-class-export": noDefaultClassExportRule,
+          "jsx-classname-required": allRules.jsxClassNameRequiredRule,
         },
       },
     },
@@ -199,19 +203,29 @@ const config = [
   // Use recommended-latest if available (v5+), otherwise create flat config equivalent of legacy recommended
   ...(reactHooks.configs["recommended-latest"]
     ? [reactHooks.configs["recommended-latest"]]
-    : [{
-        name: "react-hooks/recommended-flat",
-        plugins: {
-          "react-hooks": reactHooks,
-        },
-        rules: {
-          "react-hooks/rules-of-hooks": "error",
-          "react-hooks/exhaustive-deps": "warn",
+    : [
+        {
+          name: "react-hooks/recommended-flat",
+          plugins: {
+            "react-hooks": reactHooks,
+          },
+          rules: {
+            "react-hooks/rules-of-hooks": "error",
+            "react-hooks/exhaustive-deps": "warn",
+          },
         },
-      }]
-  ),
+      ]),
   js.configs.recommended,
   ...tseslint.configs.recommended,
+  // Error handling plugin strict config
+  {
+    plugins: {
+      error: errorPlugin,
+    },
+    rules: {
+      ...errorPlugin.configs.strict.rules,
+    },
+  },
 
   // TypeScript and TSX files
   {
@@ -248,15 +262,18 @@ const config = [
       "no-undef": "off", // TypeScript handles this
       "custom/no-default-class-export": "error",
       "single-export/single-export": "error",
-      "required-exports/required-exports": ["error", {
-        "variable": false,    // Don't require exporting variables/constants
-        "function": false,    // Don't require exporting functions
-        "class": true,        // Require exporting classes (matches old behavior)
-        "interface": false,   // Don't require exporting interfaces
-        "type": false,        // Don't require exporting types
-        "enum": true,         // Require exporting enums (matches old behavior)
-        "ignorePrivate": true // Ignore declarations starting with _
-      }],
+      "required-exports/required-exports": [
+        "error",
+        {
+          variable: false, // Don't require exporting variables/constants
+          function: false, // Don't require exporting functions
+          class: true, // Require exporting classes (matches old behavior)
+          interface: false, // Don't require exporting interfaces
+          type: false, // Don't require exporting types
+          enum: true, // Require exporting enums (matches old behavior)
+          ignorePrivate: true, // Ignore declarations starting with _
+        },
+      ],
       "no-restricted-syntax": [
         "error",
         ...sharedRestrictedSyntax,
@@ -273,15 +290,18 @@ const config = [
       // Include all shared rules (like max-lines-per-function)
       ...sharedRules,
       "single-export/single-export": "off", // TSX files have their own specific export rules
-      "required-exports/required-exports": ["error", {
-        "variable": false,    // Don't require exporting variables/constants
-        "function": false,    // Don't require exporting functions
-        "class": true,        // Require exporting classes (matches old behavior)
-        "interface": false,   // Don't require exporting interfaces
-        "type": false,        // Don't require exporting types
-        "enum": true,         // Require exporting enums (matches old behavior)
-        "ignorePrivate": true // Ignore declarations starting with _
-      }],
+      "required-exports/required-exports": [
+        "error",
+        {
+          variable: false, // Don't require exporting variables/constants
+          function: false, // Don't require exporting functions
+          class: true, // Require exporting classes (matches old behavior)
+          interface: false, // Don't require exporting interfaces
+          type: false, // Don't require exporting types
+          enum: true, // Require exporting enums (matches old behavior)
+          ignorePrivate: true, // Ignore declarations starting with _
+        },
+      ],
       "no-restricted-syntax": [
         "error",
         // Switch case rules as errors
@@ -343,12 +363,6 @@ const config = [
           message:
             "Function expressions containing switch statements must have explicit return type annotations.",
         },
-        // className requirement for HTML elements
-        {
-          selector:
-            'JSXOpeningElement:not([name.name=/^[A-Z]/]):not([name.name="Fragment"]):not(:has(JSXAttribute[name.name="className"]))',
-          message: "HTML elements must have a className attribute.",
-        },
       ],
     },
   },
@@ -474,19 +488,19 @@ const config = [
     rules: {
       ...sharedRules,
       "single-export/single-export": "error",
-      "required-exports/required-exports": ["error", {
-        "variable": false,    // Don't require exporting variables/constants
-        "function": false,    // Don't require exporting functions
-        "class": true,        // Require exporting classes (matches old behavior)
-        "interface": false,   // Don't require exporting interfaces (N/A for JS)
-        "type": false,        // Don't require exporting types (N/A for JS)
-        "enum": false,        // Don't require exporting enums (N/A for JS)
-        "ignorePrivate": true // Ignore declarations starting with _
-      }],
-      "no-restricted-syntax": [
+      "required-exports/required-exports": [
         "error",
-        ...sharedRestrictedSyntax,
+        {
+          variable: false, // Don't require exporting variables/constants
+          function: false, // Don't require exporting functions
+          class: true, // Require exporting classes (matches old behavior)
+          interface: false, // Don't require exporting interfaces (N/A for JS)
+          type: false, // Don't require exporting types (N/A for JS)
+          enum: false, // Don't require exporting enums (N/A for JS)
+          ignorePrivate: true, // Ignore declarations starting with _
+        },
       ],
+      "no-restricted-syntax": ["error", ...sharedRestrictedSyntax],
     },
   },
 
@@ -538,15 +552,18 @@ const config = [
       ...sharedRules,
       "no-undef": "off", // TypeScript handles this
       "single-export/single-export": "off", // JSX files have their own specific export rules
-      "required-exports/required-exports": ["error", {
-        "variable": false,    // Don't require exporting variables/constants
-        "function": false,    // Don't require exporting functions
-        "class": true,        // Require exporting classes (matches old behavior)
-        "interface": false,   // Don't require exporting interfaces (N/A for JSX)
-        "type": false,        // Don't require exporting types (N/A for JSX)
-        "enum": false,        // Don't require exporting enums (N/A for JSX)
-        "ignorePrivate": true // Ignore declarations starting with _
-      }],
+      "required-exports/required-exports": [
+        "error",
+        {
+          variable: false, // Don't require exporting variables/constants
+          function: false, // Don't require exporting functions
+          class: true, // Require exporting classes (matches old behavior)
+          interface: false, // Don't require exporting interfaces (N/A for JSX)
+          type: false, // Don't require exporting types (N/A for JSX)
+          enum: false, // Don't require exporting enums (N/A for JSX)
+          ignorePrivate: true, // Ignore declarations starting with _
+        },
+      ],
       "no-restricted-syntax": [
         "error",
         // Switch case rules as errors
@@ -608,12 +625,6 @@ const config = [
           message:
             "Function expressions containing switch statements must have explicit return type annotations.",
         },
-        // className requirement for HTML elements
-        {
-          selector:
-            'JSXOpeningElement:not([name.name=/^[A-Z]/]):not([name.name="Fragment"]):not(:has(JSXAttribute[name.name="className"]))',
-          message: "HTML elements must have a className attribute.",
-        },
         // Required export rules as errors (class rule only for JSX)
         {
           selector:
@@ -658,15 +669,18 @@ const config = [
     rules: {
       "no-undef": "off", // TypeScript handles this
       "single-export/single-export": "off", // JSX files have their own specific export rules
-      "required-exports/required-exports": ["warn", {
-        "variable": false,    // Don't require exporting variables/constants
-        "function": false,    // Don't require exporting functions
-        "class": true,        // Require exporting classes (matches old behavior)
-        "interface": false,   // Don't require exporting interfaces (N/A for JSX)
-        "type": false,        // Don't require exporting types (N/A for JSX)
-        "enum": false,        // Don't require exporting enums (N/A for JSX)
-        "ignorePrivate": true // Ignore declarations starting with _
-      }],
+      "required-exports/required-exports": [
+        "warn",
+        {
+          variable: false, // Don't require exporting variables/constants
+          function: false, // Don't require exporting functions
+          class: true, // Require exporting classes (matches old behavior)
+          interface: false, // Don't require exporting interfaces (N/A for JSX)
+          type: false, // Don't require exporting types (N/A for JSX)
+          enum: false, // Don't require exporting enums (N/A for JSX)
+          ignorePrivate: true, // Ignore declarations starting with _
+        },
+      ],
       "no-restricted-syntax": [
         "warn",
         // Include shared rules but remove the multiple exports restriction and switch case rules for JSX
@@ -829,18 +843,22 @@ const config = [
       "**/test/**",
       "!**/test/export/**",
       "!**/test/required-exports/**",
+      "!**/test/switch-case/**",
       "**/rules/**/index.js",
     ],
     rules: {
-      "required-exports/required-exports": ["error", {
-        "variable": false,    // Don't require exporting variables/constants
-        "function": false,    // Don't require exporting functions
-        "class": true,        // Require exporting classes (matches old behavior)
-        "interface": false,   // Don't require exporting interfaces
-        "type": false,        // Don't require exporting types
-        "enum": true,         // Require exporting enums (matches old behavior)
-        "ignorePrivate": true // Ignore declarations starting with _
-      }],
+      "required-exports/required-exports": [
+        "error",
+        {
+          variable: false, // Don't require exporting variables/constants
+          function: false, // Don't require exporting functions
+          class: true, // Require exporting classes (matches old behavior)
+          interface: false, // Don't require exporting interfaces
+          type: false, // Don't require exporting types
+          enum: true, // Require exporting enums (matches old behavior)
+          ignorePrivate: true, // Ignore declarations starting with _
+        },
+      ],
       "no-restricted-syntax": [
         "error",
         // Switch case rules as errors
@@ -933,14 +951,7 @@ const config = [
     files: ["**/*.{tsx,jsx}"],
     ignores: ["**/*.stories.{js,jsx,ts,tsx}"],
     rules: {
-      "no-restricted-syntax": [
-        "error",
-        {
-          selector:
-            'JSXOpeningElement:not([name.name=/^[A-Z]/]):not([name.name="Fragment"]):not(:has(JSXAttribute[name.name="className"]))',
-          message: "HTML elements must have a className attribute.",
-        },
-      ],
+      "custom/jsx-classname-required": "error",
     },
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-agent",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "ESLint configuration package with TypeScript support",
   "main": "index.js",
   "type": "module",
@@ -106,5 +106,8 @@
     "globals": "^16.3.0",
     "release-it": "^19.0.4",
     "typescript-eslint": "^8.40.0"
+  },
+  "dependencies": {
+    "eslint-plugin-error": "^1.1.1"
   }
 }

package/rules/index.js

@@ -16,6 +16,7 @@ import { noTypeAssertionsConfig } from "./no-type-assertions/index.js";
 import { noExportSpecifiersConfig } from "./no-empty-exports/index.js";
 import { noClassPropertyDefaultsConfig } from "./no-class-property-defaults/index.js";
 import { noDefaultClassExportRules } from "./no-default-class-export/index.js";
+import { jsxClassNameRequiredRule } from "./jsx-classname-required/index.js";
 
 // Plugin rule configurations
 import { pluginRules } from "./plugin/index.js";
@@ -36,6 +37,7 @@ const allRules = {
   noExportSpecifiersConfig,
   noClassPropertyDefaultsConfig,
   noDefaultClassExportRules,
+  jsxClassNameRequiredRule,
 
   // Plugin rule configurations
   pluginRules,
@@ -59,6 +61,7 @@ export {
   noExportSpecifiersConfig,
   noClassPropertyDefaultsConfig,
   noDefaultClassExportRules,
+  jsxClassNameRequiredRule,
 
   // Plugin rule configurations
   pluginRules,

package/rules/jsx-classname-required/index.js

@@ -0,0 +1,68 @@
+/**
+ * ESLint rule to require className attribute on HTML elements in JSX
+ *
+ * This rule enforces that all HTML elements in JSX must have a className attribute.
+ * It excludes React components (starting with capital letters) and fragments.
+ *
+ * Examples:
+ * - ❌ <div>Content</div>
+ * - ✅ <div className="container">Content</div>
+ * - ✅ <MyComponent>Content</MyComponent> (ignored - React component)
+ * - ✅ <Fragment>Content</Fragment> (ignored - fragment)
+ * - ✅ <React.Fragment>Content</React.Fragment> (ignored - React fragment)
+ * - ✅ <React.StrictMode>Content</React.StrictMode> (ignored - React component)
+ */
+
+const jsxClassNameRequiredRule = {
+  meta: {
+    type: "layout",
+    docs: {
+      description: "Require className attribute on HTML elements in JSX",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingClassName: "HTML elements must have a className attribute.",
+    },
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        // Skip if this is a React component (starts with capital letter)
+        if (node.name.type === 'JSXIdentifier' && /^[A-Z]/.test(node.name.name)) {
+          return;
+        }
+
+        // Skip if this is Fragment
+        if (node.name.type === 'JSXIdentifier' && node.name.name === 'Fragment') {
+          return;
+        }
+
+        // Skip if this is React.Something (like React.Fragment, React.StrictMode, etc.)
+        if (node.name.type === 'JSXMemberExpression' &&
+            node.name.object.name === 'React' &&
+            /^[A-Z]/.test(node.name.property.name)) {
+          return;
+        }
+
+        // Check if element has className attribute
+        const hasClassName = node.attributes.some(attr =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.name === 'className'
+        );
+
+        if (!hasClassName) {
+          context.report({
+            node,
+            messageId: 'missingClassName',
+          });
+        }
+      },
+    };
+  },
+};
+
+export { jsxClassNameRequiredRule };

package/rules/jsx-classname-required/jsx-classname-required.spec.js

@@ -0,0 +1,283 @@
+import { RuleTester } from "eslint";
+import { jsxClassNameRequiredRule } from "./index.js";
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2022,
+    sourceType: "module",
+    parser: (await import("typescript-eslint")).parser,
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+ruleTester.run('jsx-classname-required', jsxClassNameRequiredRule, {
+  valid: [
+    // HTML elements with className
+    {
+      code: '<div className="container">Content</div>',
+    },
+    {
+      code: '<span className="text">Text</span>',
+    },
+    {
+      code: '<p className="paragraph">Paragraph</p>',
+    },
+    {
+      code: '<button className="btn">Button</button>',
+    },
+    {
+      code: '<input className="input" type="text" />',
+    },
+    {
+      code: '<img className="image" src="test.jpg" alt="test" />',
+    },
+
+    // React components (should be ignored)
+    {
+      code: '<MyComponent>Content</MyComponent>',
+    },
+    {
+      code: '<CustomButton onClick={() => {}}>Click</CustomButton>',
+    },
+    {
+      code: '<AnotherComponent prop="value" />',
+    },
+
+    // Fragments (should be ignored)
+    {
+      code: '<Fragment>Content</Fragment>',
+    },
+    {
+      code: '<React.Fragment>Content</React.Fragment>',
+    },
+    {
+      code: '<>Content</>',
+    },
+
+    // React.* components (should be ignored)
+    {
+      code: '<React.StrictMode><div className="content">Content</div></React.StrictMode>',
+    },
+    {
+      code: '<React.Suspense fallback={<div className="loading">Loading</div>}><div className="content">Content</div></React.Suspense>',
+    },
+    {
+      code: '<React.Profiler id="test" onRender={() => {}}><div className="content">Content</div></React.Profiler>',
+    },
+
+    // Mixed cases with valid HTML elements
+    {
+      code: `
+        <div className="container">
+          <MyComponent>
+            <p className="text">Text</p>
+          </MyComponent>
+          <React.Fragment>
+            <span className="fragment-content">Fragment content</span>
+          </React.Fragment>
+        </div>
+      `,
+    },
+
+    // Nested valid cases
+    {
+      code: `
+        <div className="outer">
+          <div className="inner">
+            <span className="nested">Nested content</span>
+          </div>
+        </div>
+      `,
+    },
+  ],
+
+  invalid: [
+    // HTML elements without className
+    {
+      code: '<div>Content</div>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<span>Text</span>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<p>Paragraph</p>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<button>Button</button>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<input type="text" />',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<img src="test.jpg" alt="test" />',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+
+    // HTML elements inside React components (should still error)
+    {
+      code: '<MyComponent><div>Content</div></MyComponent>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<React.StrictMode><div>Content</div></React.StrictMode>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<React.Fragment><span>Content</span></React.Fragment>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<Fragment><p>Content</p></Fragment>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<><div>Content</div></>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+
+    // Multiple errors in one file
+    {
+      code: `
+        <div className="container">
+          <span>Missing className</span>
+          <p>Also missing className</p>
+        </div>
+      `,
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+
+    // Mixed valid/invalid cases
+    {
+      code: `
+        <div className="container">
+          <span className="valid">Valid</span>
+          <p>Invalid - no className</p>
+          <MyComponent>
+            <div>Invalid - no className</div>
+          </MyComponent>
+        </div>
+      `,
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+
+    // Edge cases
+    {
+      code: '<h1>Heading</h1>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<section>Section</section>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<article>Article</article>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: '<nav>Navigation</nav>',
+      errors: [
+        {
+          messageId: 'missingClassName',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+  ],
+});