eslint-plugin-code-style 1.3.3 → 1.3.8

package/README.md

@@ -300,8 +300,9 @@ rules: {
 | `module-index-exports` | Index files must export all folder contents (files and subfolders) ⚙️ |
 | **JSX Rules** | |
 | `classname-dynamic-at-end` | Dynamic expressions (`${className}`) must be at the end of class strings (JSX and variables) |
-| `classname-multiline` | Long className strings broken into multiple lines, one class per line; uses `"..."` in JSX (no expressions) or `` `...` `` (with expressions/variables) ⚙️ |
-| `classname-no-extra-spaces` | No extra/leading/trailing spaces in class strings (JSX, variables, and objects) |
+| `classname-multiline` | Long className strings broken into multiple lines; smart detection for objects/returns with Tailwind values ⚙️ |
+| `classname-no-extra-spaces` | No extra/leading/trailing spaces in class strings; smart detection for objects/returns with Tailwind values |
+| `classname-order` | Tailwind class ordering in variables/objects/returns; smart detection for Tailwind values |
 | `jsx-children-on-new-line` | Multiple JSX children: each on own line with proper indentation |
 | `jsx-closing-bracket-spacing` | No space before `>` or `/>` in JSX tags |
 | `jsx-element-child-new-line` | Nested JSX elements on new lines; text/expression children can stay inline |

package/index.js

@@ -410,7 +410,7 @@ const arrayItemsPerLine = {
                                 node,
                                 singleLine,
                             ),
-                            message: `Array with ${maxItems} or fewer items should be on one line`,
+                            message: `Array with ≤${maxItems} simple items should be single line: [a, b, c]. Multi-line only for >${maxItems} items or complex values`,
                             node,
                         });
                     }
@@ -1114,7 +1114,7 @@ const arrowFunctionSimplify = {
                         node.body,
                         expressionText,
                     ),
-                    message: "Arrow function with single simple statement should use expression body",
+                    message: "Arrow function with single return should use expression body: () => value instead of () => { return value }",
                     node: node.body,
                 });
 
@@ -1148,7 +1148,7 @@ const arrowFunctionSimplify = {
                         node.body,
                         expressionText,
                     ),
-                    message: "Arrow function with single statement should use expression body",
+                    message: "Arrow function with single statement should use expression body: () => expression instead of () => { return expression }",
                     node: node.body,
                 });
             }
@@ -1773,6 +1773,7 @@ const functionDeclarationStyle = {
  * Description:
  *   Function names should follow naming conventions: camelCase,
  *   starting with a verb, and handlers ending with "Handler".
+ *   Auto-fixes PascalCase functions that start with verbs to camelCase.
  *
  * ✓ Good:
  *   function getUserData() {}
@@ -1780,10 +1781,10 @@ const functionDeclarationStyle = {
  *   function isValidEmail() {}
  *   const submitHandler = () => {}
  *
- * ✗ Bad:
- *   function GetUserData() {}
+ * ✗ Bad (auto-fixed):
+ *   function GetUserData() {}   // → getUserData
+ *   const FetchStatus = () => {} // → fetchStatus
  *   function user_data() {}
- *   function click() {}
  */
 const functionNamingConvention = {
     create(context) {
@@ -1803,7 +1804,7 @@ const functionNamingConvention = {
             "render", "display", "show", "hide", "toggle", "enable", "disable",
             "open", "close", "start", "stop", "init", "setup", "reset", "clear",
             "connect", "disconnect", "subscribe", "unsubscribe", "listen", "emit",
-            "send", "receive", "request", "respond", "submit", "cancel", "abort",
+            "send", "receive", "request", "respond", "submit", "cancel", "abort", "poll",
             "read", "write", "copy", "move", "clone", "extract", "insert", "append", "prepend",
             "build", "make", "generate", "compute", "calculate", "process", "execute", "run",
             "apply", "call", "invoke", "trigger", "fire", "dispatch",
@@ -1823,6 +1824,16 @@ const functionNamingConvention = {
 
         const startsWithVerbHandler = (name) => verbPrefixes.some((verb) => name.startsWith(verb));
 
+        // Case-insensitive check for verb prefix (to catch PascalCase like "GetForStatus")
+        const startsWithVerbCaseInsensitiveHandler = (name) => {
+            const lowerName = name.toLowerCase();
+
+            return verbPrefixes.some((verb) => lowerName.startsWith(verb));
+        };
+
+        // Convert PascalCase to camelCase
+        const toCamelCaseHandler = (name) => name[0].toLowerCase() + name.slice(1);
+
         const endsWithHandler = (name) => handlerRegex.test(name);
 
         const checkFunctionHandler = (node) => {
@@ -1838,12 +1849,50 @@ const functionNamingConvention = {
 
             if (!name) return;
 
-            // Skip React components (PascalCase)
-            if (/^[A-Z]/.test(name)) return;
-
             // Skip hooks
             if (/^use[A-Z]/.test(name)) return;
 
+            // Check PascalCase functions
+            if (/^[A-Z]/.test(name)) {
+                // If starts with a verb (case-insensitive), it should be camelCase
+                if (startsWithVerbCaseInsensitiveHandler(name)) {
+                    const camelCaseName = toCamelCaseHandler(name);
+                    const identifierNode = node.id || node.parent.id;
+
+                    context.report({
+                        fix(fixer) {
+                            const scope = context.sourceCode
+                                ? context.sourceCode.getScope(node)
+                                : context.getScope();
+
+                            const variable = scope.variables.find((v) => v.name === name)
+                                || (scope.upper && scope.upper.variables.find((v) => v.name === name));
+
+                            if (!variable) return fixer.replaceText(identifierNode, camelCaseName);
+
+                            const fixes = [];
+                            const fixedRanges = new Set();
+
+                            variable.references.forEach((ref) => {
+                                const rangeKey = `${ref.identifier.range[0]}-${ref.identifier.range[1]}`;
+
+                                if (!fixedRanges.has(rangeKey)) {
+                                    fixedRanges.add(rangeKey);
+                                    fixes.push(fixer.replaceText(ref.identifier, camelCaseName));
+                                }
+                            });
+
+                            return fixes;
+                        },
+                        message: `Function "${name}" should be camelCase. Use "${camelCaseName}" instead of "${name}"`,
+                        node: node.id || node.parent.id,
+                    });
+                }
+
+                // Skip other PascalCase names (likely React components)
+                return;
+            }
+
             const hasVerbPrefix = startsWithVerbHandler(name);
             const hasHandlerSuffix = endsWithHandler(name);
 
@@ -2604,7 +2653,7 @@ const hookDepsPerLine = {
                             [openBracket.range[1], closeBracket.range[0]],
                             elementsText,
                         ),
-                        message: `Dependencies should be on same line when ${maxDeps} or fewer`,
+                        message: `Hook dependencies with ≤${maxDeps} items should be single line: [dep1, dep2]. Multi-line only for >${maxDeps} dependencies`,
                         node: depsArg,
                     });
                 }
@@ -2995,7 +3044,7 @@ const multilineIfConditions = {
                                 `(${buildSameLineHandler(test)})`,
                             );
                         },
-                        message: `If conditions with ${maxOperands} or fewer operands should have all operands start on the same line`,
+                        message: `If conditions with ≤${maxOperands} operands should be single line: if (a && b && c). Multi-line only for >${maxOperands} operands`,
                         node: test,
                     });
                 }
@@ -3155,7 +3204,7 @@ const multilineIfConditions = {
 
                             return fixer.replaceText(value, buildSameLineHandler(value));
                         },
-                        message: `Property conditions with ${maxOperands} or fewer operands should have all operands start on the same line`,
+                        message: `Property conditions with ≤${maxOperands} operands should be single line: condition: a && b && c. Multi-line only for >${maxOperands} operands`,
                         node: value,
                     });
                 }
@@ -3585,7 +3634,7 @@ const exportFormat = {
                             [openBrace.range[0], closeBrace.range[1]],
                             `{ ${specifiersText} }`,
                         ),
-                        message: `Exports with ${maxSpecifiers} or fewer specifiers should be on a single line`,
+                        message: `Exports with ≤${maxSpecifiers} specifiers should be single line: export { a, b, c }`,
                         node,
                     });
                 }
@@ -3779,7 +3828,7 @@ const importFormat = {
                             [openBrace.range[0], closeBrace.range[1]],
                             `{ ${specifiersText} }`,
                         ),
-                        message: `Imports with ${maxSpecifiers} or fewer specifiers should be on a single line`,
+                        message: `Imports with ≤${maxSpecifiers} specifiers should be single line: import { a, b, c } from "module"`,
                         node,
                     });
                 }
@@ -5629,7 +5678,7 @@ const classNameDynamicAtEnd = {
 
                                 return fixer.replaceText(templateLiteral, newValue);
                             },
-                            message: "Dynamic expressions in class string should be at the end, after static classes",
+                            message: "Dynamic expressions (${...}) must be at the end of class strings. Use: `static-class ${dynamic}` not `${dynamic} static-class`",
                             node: reportNode || expressions[i],
                         });
 
@@ -5676,17 +5725,18 @@ const classNameDynamicAtEnd = {
  *
  * Description:
  *   Disallow multiple consecutive spaces and leading/trailing spaces
- *   in className values. Uses smart detection to identify class strings.
+ *   in className values. Uses smart detection: checks objects/returns
+ *   if variable name contains "class" OR if values look like Tailwind.
  *
  * ✓ Good:
  *   className="flex items-center gap-4"
- *   const buttonClasses = `flex items-center ${className}`;
- *   const variantClasses = { primary: "bg-blue-500 text-white" };
+ *   const variants = { primary: "bg-blue-500 text-white" };
+ *   return "border-error text-error focus:border-error";
  *
  * ✗ Bad:
  *   className="flex  items-center   gap-4"
- *   const buttonClasses = ` flex items-center ${className} `;
- *   const variantClasses = { primary: "bg-blue-500  text-white" };
+ *   const variants = { primary: "bg-blue-500  text-white" };
+ *   return "border-error  text-error   focus:border-error";
  */
 const classNameNoExtraSpaces = {
     create(context) {
@@ -5816,15 +5866,15 @@ const classNameNoExtraSpaces = {
 
                 // Check object with class values
                 if (node.init && node.init.type === "ObjectExpression") {
-                    // Only check objects if variable name suggests classes
-                    if (!isClassRelatedName(varName)) return;
-
                     node.init.properties.forEach((prop) => {
                         if (prop.type !== "Property") return;
 
                         if (prop.value && prop.value.type === "Literal" && typeof prop.value.value === "string") {
-                            // For object properties, always check since parent is class-related
                             const value = prop.value.value;
+
+                            // Check if variable name suggests classes OR value looks like Tailwind
+                            if (!isClassRelated(varName, value)) return;
+
                             const raw = sourceCode.getText(prop.value);
                             const quote = raw[0];
 
@@ -5867,15 +5917,33 @@ const classNameNoExtraSpaces = {
                         }
 
                         if (prop.value && prop.value.type === "TemplateLiteral") {
-                            checkTemplateLiteralHandler(prop.value, varName);
+                            // For template literals, extract static content to check for Tailwind classes
+                            const staticContent = prop.value.quasis.map((q) => q.value.raw).join(" ").trim();
+
+                            if (isClassRelated(varName, staticContent)) {
+                                checkTemplateLiteralHandler(prop.value, varName);
+                            }
                         }
                     });
                 }
             },
+
+            // Check return statements with Tailwind class values
+            ReturnStatement(node) {
+                if (!node.argument) return;
+
+                if (node.argument.type === "Literal" && typeof node.argument.value === "string") {
+                    checkStringLiteralHandler(node.argument, node.argument.value, "return");
+                }
+
+                if (node.argument.type === "TemplateLiteral") {
+                    checkTemplateLiteralHandler(node.argument, "return");
+                }
+            },
         };
     },
     meta: {
-        docs: { description: "Disallow extra/leading/trailing spaces in className values" },
+        docs: { description: "Disallow extra/leading/trailing spaces in className values; smart detection for objects with Tailwind values and return statements" },
         fixable: "code",
         schema: [],
         type: "layout",
@@ -5888,21 +5956,21 @@ const classNameNoExtraSpaces = {
  * ───────────────────────────────────────────────────────────────
  *
  * Description:
- *   Enforce Tailwind CSS class ordering in class string variables
- *   and object properties. This rule complements tailwindcss/classnames-order
- *   by handling cases it doesn't cover (variables and objects).
- *   Uses smart detection to identify class strings by name or content.
+ *   Enforce Tailwind CSS class ordering in class string variables,
+ *   object properties, and return statements. Complements
+ *   tailwindcss/classnames-order by handling cases it doesn't cover.
+ *   Uses smart detection: checks if values look like Tailwind classes.
  *
  * Note: This rule does NOT check JSX className attributes directly,
  *       as those should be handled by tailwindcss/classnames-order.
  *
  * ✓ Good:
- *   const classes = "flex items-center p-4 text-white";
- *   const variantClasses = { primary: "bg-blue-500 hover:bg-blue-600" };
+ *   const variants = { primary: "bg-blue-500 hover:bg-blue-600" };
+ *   return "border-error text-error focus:border-error";
  *
  * ✗ Bad:
- *   const classes = "text-white p-4 flex items-center";
- *   const variantClasses = { primary: "hover:bg-blue-600 bg-blue-500" };
+ *   const variants = { primary: "hover:bg-blue-600 bg-blue-500" };
+ *   return "focus:border-error text-error border-error";
  */
 const classNameOrder = {
     create(context) {
@@ -5921,7 +5989,7 @@ const classNameOrder = {
 
             context.report({
                 fix: (fixer) => fixer.replaceText(node, `${quote}${sorted}${quote}`),
-                message: "Tailwind classes should be ordered according to recommended order",
+                message: "Tailwind classes should follow recommended order: layout (flex, grid) → sizing (w, h) → spacing (p, m) → typography (text, font) → colors (bg, text) → effects (shadow, opacity) → states (hover, focus)",
                 node,
             });
         };
@@ -6003,7 +6071,7 @@ const classNameOrder = {
 
                     return fixer.replaceText(templateLiteral, result);
                 },
-                message: "Tailwind classes should be ordered according to recommended order",
+                message: "Tailwind classes should follow recommended order: layout (flex, grid) → sizing (w, h) → spacing (p, m) → typography (text, font) → colors (bg, text) → effects (shadow, opacity) → states (hover, focus)",
                 node: templateLiteral,
             });
         };
@@ -6030,14 +6098,15 @@ const classNameOrder = {
 
                 // Check object with class values
                 if (node.init && node.init.type === "ObjectExpression") {
-                    if (!isClassRelatedName(varName)) return;
-
                     node.init.properties.forEach((prop) => {
                         if (prop.type !== "Property") return;
 
                         if (prop.value && prop.value.type === "Literal" && typeof prop.value.value === "string") {
                             const value = prop.value.value;
 
+                            // Check if variable name suggests classes OR value looks like Tailwind
+                            if (!isClassRelated(varName, value)) return;
+
                             if (needsReordering(value)) {
                                 const sorted = sortTailwindClasses(value);
                                 const raw = sourceCode.getText(prop.value);
@@ -6045,22 +6114,52 @@ const classNameOrder = {
 
                                 context.report({
                                     fix: (fixer) => fixer.replaceText(prop.value, `${quote}${sorted}${quote}`),
-                                    message: "Tailwind classes should be ordered according to recommended order",
+                                    message: "Tailwind classes should follow recommended order: layout (flex, grid) → sizing (w, h) → spacing (p, m) → typography (text, font) → colors (bg, text) → effects (shadow, opacity) → states (hover, focus)",
                                     node: prop.value,
                                 });
                             }
                         }
 
                         if (prop.value && prop.value.type === "TemplateLiteral") {
-                            checkTemplateLiteralOrderHandler(prop.value, varName);
+                            // For template literals, extract static content to check for Tailwind classes
+                            const staticContent = prop.value.quasis.map((q) => q.value.raw).join(" ").trim();
+
+                            if (isClassRelated(varName, staticContent)) {
+                                checkTemplateLiteralOrderHandler(prop.value, varName);
+                            }
                         }
                     });
                 }
             },
+
+            // Check return statements with Tailwind class values
+            ReturnStatement(node) {
+                if (!node.argument) return;
+
+                if (node.argument.type === "Literal" && typeof node.argument.value === "string") {
+                    const value = node.argument.value;
+
+                    if (looksLikeTailwindClasses(value) && needsReordering(value)) {
+                        const sorted = sortTailwindClasses(value);
+                        const raw = sourceCode.getText(node.argument);
+                        const quote = raw[0];
+
+                        context.report({
+                            fix: (fixer) => fixer.replaceText(node.argument, `${quote}${sorted}${quote}`),
+                            message: "Tailwind classes should follow recommended order: layout (flex, grid) → sizing (w, h) → spacing (p, m) → typography (text, font) → colors (bg, text) → effects (shadow, opacity) → states (hover, focus)",
+                            node: node.argument,
+                        });
+                    }
+                }
+
+                if (node.argument.type === "TemplateLiteral") {
+                    checkTemplateLiteralOrderHandler(node.argument, "return");
+                }
+            },
         };
     },
     meta: {
-        docs: { description: "Enforce Tailwind CSS class ordering in class strings" },
+        docs: { description: "Enforce Tailwind CSS class ordering in class strings; smart detection for objects with Tailwind values and return statements" },
         fixable: "code",
         schema: [],
         type: "layout",
@@ -6076,20 +6175,26 @@ const classNameOrder = {
  *   Enforce that long className strings are broken into multiple
  *   lines, with each class on its own line. Triggers when either
  *   the class count or string length exceeds the threshold.
- *   Dynamic expressions must remain at the end.
+ *   Uses smart detection: checks objects/returns if values look
+ *   like Tailwind classes.
  *
  * ✓ Good:
- *   className={`
- *       flex
- *       items-center
- *       justify-center
- *       rounded-lg
- *       ${className}
- *   `}
+ *   const variants = {
+ *       primary: `
+ *           bg-primary
+ *           text-white
+ *           hover:bg-primary-dark
+ *       `,
+ *   };
+ *   return `
+ *       border-error
+ *       text-error
+ *       focus:border-error
+ *   `;
  *
  * ✗ Bad:
- *   className="flex items-center justify-center rounded-lg"
- *   className={`flex items-center justify-center rounded-lg ${className}`}
+ *   const variants = { primary: "bg-primary text-white hover:bg-primary-dark focus:ring-2" };
+ *   return "border-error text-error placeholder-error/50 focus:border-error";
  */
 const classNameMultiline = {
     create(context) {
@@ -6219,7 +6324,7 @@ const classNameMultiline = {
                     // Variables/objects: multiline "..." is invalid JS, use template literal
                     return fixer.replaceText(node, buildMultilineTemplate(classes, [], baseIndent));
                 },
-                message: "Class string with many classes should be broken into multiple lines",
+                message: `Class strings with >${maxClassCount} classes or >${maxLength} chars should be multiline with one class per line. Example: className="\\n    flex\\n    items-center\\n"`,
                 node,
             });
         };
@@ -6305,7 +6410,7 @@ const classNameMultiline = {
 
             context.report({
                 fix: (fixer) => fixer.replaceText(templateLiteral, multiline),
-                message: "Class string with many classes should be broken into multiple lines",
+                message: `Class strings with >${maxClassCount} classes or >${maxLength} chars should be multiline with one class per line. Example: className="\\n    flex\\n    items-center\\n"`,
                 node: templateLiteral,
             });
         };
@@ -6341,25 +6446,53 @@ const classNameMultiline = {
                 }
 
                 if (node.init && node.init.type === "ObjectExpression") {
-                    if (!isClassRelatedName(varName)) return;
-
+                    // Check each property - apply rule if name suggests classes OR value looks like Tailwind
                     node.init.properties.forEach((prop) => {
                         if (prop.type !== "Property") return;
 
                         if (prop.value && prop.value.type === "Literal" && typeof prop.value.value === "string") {
-                            checkStringLiteralHandler(prop.value, prop.value.value, varName);
+                            // Check if variable name suggests classes OR if the value looks like Tailwind classes
+                            if (isClassRelated(varName, prop.value.value)) {
+                                checkStringLiteralHandler(prop.value, prop.value.value, varName);
+                            }
                         }
 
                         if (prop.value && prop.value.type === "TemplateLiteral") {
-                            checkTemplateLiteralHandler(prop.value, varName);
+                            // For template literals, extract static content to check for Tailwind classes
+                            const staticContent = prop.value.quasis.map((q) => q.value.raw).join(" ").trim();
+
+                            if (isClassRelated(varName, staticContent)) {
+                                checkTemplateLiteralHandler(prop.value, varName);
+                            }
                         }
                     });
                 }
             },
+
+            // Check return statements with Tailwind class values
+            ReturnStatement(node) {
+                if (!node.argument) return;
+
+                if (node.argument.type === "Literal" && typeof node.argument.value === "string") {
+                    const value = node.argument.value;
+
+                    if (looksLikeTailwindClasses(value)) {
+                        checkStringLiteralHandler(node.argument, value, "return");
+                    }
+                }
+
+                if (node.argument.type === "TemplateLiteral") {
+                    const staticContent = node.argument.quasis.map((q) => q.value.raw).join(" ").trim();
+
+                    if (looksLikeTailwindClasses(staticContent)) {
+                        checkTemplateLiteralHandler(node.argument, "return");
+                    }
+                }
+            },
         };
     },
     meta: {
-        docs: { description: "Enforce multiline formatting for long className strings" },
+        docs: { description: "Enforce multiline formatting for long className strings; smart detection for objects with Tailwind values and return statements" },
         fixable: "code",
         schema: [
             {
@@ -7419,7 +7552,7 @@ const functionArgumentsFormat = {
                         [openParen.range[1], firstArg.range[0]],
                         "\n" + argIndent,
                     ),
-                    message: "First argument should be on its own line",
+                    message: "With multiple arguments, first argument should be on its own line: fn(\\n    arg1,\\n    arg2,\\n)",
                     node: firstArg,
                 });
             }
@@ -8719,7 +8852,7 @@ const objectPropertyPerLine = {
                             [openBrace.range[0], closeBrace.range[1]],
                             `{ ${propertiesText} }`,
                         ),
-                        message: `Objects with fewer than ${minProperties} properties should be on a single line`,
+                        message: `Objects with <${minProperties} properties should be single line: { key: value }. Multi-line only for ${minProperties}+ properties`,
                         node,
                     });
 
@@ -10744,22 +10877,25 @@ const stringPropertySpacing = {
  *
  * Description:
  *   Variable names should follow naming conventions: camelCase
- *   for regular variables, UPPER_CASE for constants, and
- *   PascalCase for React components.
+ *   for regular variables and PascalCase for React components.
+ *   Auto-fixes SCREAMING_SNAKE_CASE and snake_case to camelCase.
  *
  * ✓ Good:
  *   const userName = "John";
- *   const MAX_RETRIES = 3;
+ *   const maxRetries = 3;
+ *   const codeLength = 8;
  *   const UserProfile = () => <div />;
  *   const useCustomHook = () => {};
  *
- * ✗ Bad:
- *   const user_name = "John";
- *   const maxretries = 3;
- *   const userProfile = () => <div />;
+ * ✗ Bad (auto-fixed):
+ *   const user_name = "John";     // → userName
+ *   const CODE_LENGTH = 8;        // → codeLength
+ *   const MAX_RETRIES = 3;        // → maxRetries
  */
 const variableNamingConvention = {
     create(context) {
+        const sourceCode = context.sourceCode || context.getSourceCode();
+
         const camelCaseRegex = /^[a-z][a-zA-Z0-9]*$/;
 
         const pascalCaseRegex = /^[A-Z][a-zA-Z0-9]*$/;
@@ -10768,6 +10904,36 @@ const variableNamingConvention = {
 
         const constantRegex = /^[A-Z][A-Z0-9_]*$/;
 
+        // Convert any naming convention to camelCase
+        const toCamelCaseHandler = (name) => {
+            // Handle SCREAMING_SNAKE_CASE (e.g., CODE_LENGTH -> codeLength)
+            if (/^[A-Z][A-Z0-9_]*$/.test(name)) {
+                return name.toLowerCase().replace(/_([a-z0-9])/g, (_, char) => char.toUpperCase());
+            }
+
+            // Handle snake_case (e.g., user_name -> userName)
+            if (/_/.test(name)) {
+                return name.toLowerCase().replace(/_([a-z0-9])/g, (_, char) => char.toUpperCase());
+            }
+
+            // Handle PascalCase (e.g., UserName -> userName)
+            if (/^[A-Z]/.test(name)) {
+                return name[0].toLowerCase() + name.slice(1);
+            }
+
+            return name;
+        };
+
+        // Get all references to a variable in the current scope
+        const getVariableReferencesHandler = (node) => {
+            const scope = sourceCode.getScope ? sourceCode.getScope(node) : context.getScope();
+            const variable = scope.variables.find((v) => v.name === node.name);
+
+            if (!variable) return [];
+
+            return variable.references.map((ref) => ref.identifier);
+        };
+
         const allowedIdentifiers = [
             "ArrowFunctionExpression", "CallExpression", "FunctionDeclaration", "FunctionExpression",
             "Property", "VariableDeclarator", "JSXElement", "JSXOpeningElement", "ReturnStatement",
@@ -10978,8 +11144,21 @@ const variableNamingConvention = {
             }
 
             if (!camelCaseRegex.test(name)) {
+                const camelCaseName = toCamelCaseHandler(name);
+                const references = getVariableReferencesHandler(node.id);
+
                 context.report({
-                    message: `Variable "${name}" should be camelCase (e.g., userCookie instead of UserCookie)`,
+                    fix: (fixer) => {
+                        const fixes = [];
+
+                        // Fix all references to this variable
+                        references.forEach((ref) => {
+                            fixes.push(fixer.replaceText(ref, camelCaseName));
+                        });
+
+                        return fixes;
+                    },
+                    message: `Variable "${name}" should be camelCase (e.g., ${camelCaseName} instead of ${name})`,
                     node: node.id,
                 });
             }
@@ -11037,9 +11216,36 @@ const variableNamingConvention = {
                     // Allow component property names as arguments (e.g., Icon, Component)
                     if (componentPropertyNames.includes(name)) return;
 
+                    // Skip PascalCase that doesn't look like a misnamed function
+                    // (function-naming-convention handles verb-prefixed PascalCase)
+                    if (pascalCaseRegex.test(name)) return;
+
                     if (!camelCaseRegex.test(name)) {
+                        const camelCaseName = toCamelCaseHandler(name);
+
                         context.report({
-                            message: `Argument "${name}" should be camelCase`,
+                            fix(fixer) {
+                                const scope = sourceCode.getScope ? sourceCode.getScope(arg) : context.getScope();
+                                const variable = scope.variables.find((v) => v.name === name)
+                                    || (scope.upper && scope.upper.variables.find((v) => v.name === name));
+
+                                if (!variable) return fixer.replaceText(arg, camelCaseName);
+
+                                const fixes = [];
+                                const fixedRanges = new Set();
+
+                                variable.references.forEach((ref) => {
+                                    const rangeKey = `${ref.identifier.range[0]}-${ref.identifier.range[1]}`;
+
+                                    if (!fixedRanges.has(rangeKey)) {
+                                        fixedRanges.add(rangeKey);
+                                        fixes.push(fixer.replaceText(ref.identifier, camelCaseName));
+                                    }
+                                });
+
+                                return fixes;
+                            },
+                            message: `Argument "${name}" should be camelCase (e.g., ${camelCaseName} instead of ${name})`,
                             node: arg,
                         });
                     }
@@ -11058,6 +11264,7 @@ const variableNamingConvention = {
     },
     meta: {
         docs: { description: "Enforce naming conventions: camelCase for variables/properties/params/arguments, PascalCase for components, useXxx for hooks" },
+        fixable: "code",
         schema: [],
         type: "suggestion",
     },
@@ -12765,7 +12972,7 @@ const typeFormat = {
                         fix(fixer) {
                             return fixer.replaceText(node.id, `${typeName}Type`);
                         },
-                        message: `Type name "${typeName}" must end with "Type" suffix`,
+                        message: `Type name "${typeName}" must end with "Type" suffix. Use "${typeName}Type" instead of "${typeName}"`,
                         node: node.id,
                     });
                 }
@@ -13714,7 +13921,7 @@ const reactCodeOrder = {
                             previous: ORDER_NAMES[lastCategory],
                             type: isHook ? "hook" : "component",
                         },
-                        message: "\"{{current}}\" should come before \"{{previous}}\" in {{type}} code order",
+                        message: "\"{{current}}\" should come before \"{{previous}}\" in {{type}}. Order: refs → state → redux → router → context → custom hooks → derived → useMemo → useCallback → handlers → useEffect → return",
                         node: statement,
                     });
 
@@ -13776,7 +13983,7 @@ const enumFormat = {
                         fix(fixer) {
                             return fixer.replaceText(node.id, `${enumName}Enum`);
                         },
-                        message: `Enum name "${enumName}" must end with "Enum" suffix`,
+                        message: `Enum name "${enumName}" must end with "Enum" suffix. Use "${enumName}Enum" instead of "${enumName}"`,
                         node: node.id,
                     });
                 }
@@ -13998,7 +14205,7 @@ const interfaceFormat = {
                         fix(fixer) {
                             return fixer.replaceText(node.id, `${interfaceName}Interface`);
                         },
-                        message: `Interface name "${interfaceName}" must end with "Interface" suffix`,
+                        message: `Interface name "${interfaceName}" must end with "Interface" suffix. Use "${interfaceName}Interface" instead of "${interfaceName}"`,
                         node: node.id,
                     });
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-code-style",
-    "version": "1.3.3",
+    "version": "1.3.8",
     "description": "A custom ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects",
     "main": "index.js",
     "types": "index.d.ts",