eslint-plugin-code-style 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -7,6 +7,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.14.0] - 2026-02-05
+
+**New Rule: useState Naming Convention**
+
+**Version Range:** v1.13.0 → v1.14.0
+
+### Added
+
+**New Rules (1)**
+- `use-state-naming-convention` - Enforce boolean useState variables to start with valid prefixes 🔧
+  - Boolean state must start with: `is`, `has`, `with`, `without` (configurable)
+  - Auto-fixes both state variable and setter function names, plus all usages
+  - Detects boolean literals (`useState(false)`) and type annotations (`useState<boolean>()`)
+  - Options: `booleanPrefixes`, `extendBooleanPrefixes`, `allowPastVerbBoolean`, `allowContinuousVerbBoolean`
+
+### Enhanced
+
+- **`folder-component-suffix`** - Add auto-fix to rename component and all references in the file
+- **`function-naming-convention`** - Detect useCallback-wrapped functions in custom hooks
+- **`prop-naming-convention`** - Auto-fix now renames both type annotation AND destructured parameter with all usages
+
+### Stats
+
+- Total Rules: 76 (was 75)
+- Auto-fixable: 67 rules 🔧
+- Configurable: 17 rules ⚙️
+- Report-only: 9 rules
+
+**Full Changelog:** [v1.13.0...v1.14.0](https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.13.0...v1.14.0)
+
+---
+
 ## [1.13.0] - 2026-02-05
 
 **New Rule: Prop Naming Convention & Auto-Fix Enhancements**
@@ -1622,6 +1654,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+[1.14.0]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.13.0...v1.14.0
 [1.13.0]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.12.1...v1.13.0
 [1.12.1]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.12.0...v1.12.1
 [1.12.0]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.11.9...v1.12.0

package/README.md

@@ -19,7 +19,7 @@
 
 **A powerful ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects.**
 
-*75 rules (66 auto-fixable, 17 configurable) to keep your codebase clean and consistent*
+*76 rules (67 auto-fixable, 17 configurable) to keep your codebase clean and consistent*
 
 </div>
 
@@ -36,7 +36,7 @@ This plugin provides **75 custom rules** (66 auto-fixable, 17 configurable) for
 - **Works alongside existing tools** — Complements ESLint's built-in rules and packages like eslint-plugin-react, eslint-plugin-import, etc
 - **Self-sufficient rules** — Each rule handles complete formatting independently
 - **Consistency at scale** — Reduces code-style differences between team members by enforcing uniform formatting across your projects
-- **Highly automated** — 66 of 75 rules support auto-fix with `eslint --fix`
+- **Highly automated** — 67 of 76 rules support auto-fix with `eslint --fix`
 
 When combined with ESLint's native rules and other popular plugins, this package helps create a complete code style solution that keeps your codebase clean and consistent.
 
@@ -97,7 +97,7 @@ We provide **ready-to-use ESLint flat configuration files** that combine `eslint
 <td width="50%">
 
 ### 🔧 Auto-Fixable Rules
-**66 rules** support automatic fixing with `eslint --fix`. **17 rules** have configurable options. 9 rules are report-only (require manual changes).
+**67 rules** support automatic fixing with `eslint --fix`. **17 rules** have configurable options. 9 rules are report-only (require manual changes).
 
 </td>
 <td width="50%">
@@ -214,6 +214,7 @@ rules: {
     "code-style/function-params-per-line": "error",
     "code-style/hook-callback-format": "error",
     "code-style/hook-deps-per-line": "error",
+    "code-style/use-state-naming-convention": "error",
     "code-style/if-else-spacing": "error",
     "code-style/if-statement-format": "error",
     "code-style/import-format": "error",
@@ -265,7 +266,7 @@ rules: {
 
 ## 📖 Rules Categories
 
-> **75 rules total** — 66 with auto-fix 🔧, 17 configurable ⚙️, 9 report-only. See detailed examples in [Rules Reference](#-rules-reference) below.
+> **76 rules total** — 67 with auto-fix 🔧, 17 configurable ⚙️, 9 report-only. See detailed examples in [Rules Reference](#-rules-reference) below.
 >
 > **Legend:** 🔧 Auto-fixable with `eslint --fix` • ⚙️ Customizable options
 
@@ -316,6 +317,7 @@ rules: {
 | **Hook Rules** | |
 | `hook-callback-format` | React hooks: callback on new line, deps array on separate line, proper indentation 🔧 |
 | `hook-deps-per-line` | Collapse deps ≤ threshold to one line; expand larger arrays with each dep on own line (default: >2) 🔧 ⚙️ |
+| `use-state-naming-convention` | Boolean useState variables must start with is/has/with/without prefix 🔧 ⚙️ |
 | **Import/Export Rules** | |
 | `absolute-imports-only` | Use alias imports from index files only (not deep paths), no relative imports (default: `@/`) ⚙️ |
 | `export-format` | `export {` on same line; collapse ≤ threshold to one line; expand larger with each specifier on own line (default: ≤3) 🔧 ⚙️ |
@@ -1761,6 +1763,49 @@ useEffect(() => {}, [
 
 <br />
 
+### `use-state-naming-convention`
+
+**What it does:** Enforces boolean useState variables to start with valid prefixes (is, has, with, without).
+
+**Why use it:** Consistent boolean state naming makes code more predictable and self-documenting. When you see `isLoading`, you immediately know it's a boolean state.
+
+```typescript
+// ✅ Good — boolean state with proper prefix
+const [isLoading, setIsLoading] = useState(false);
+const [hasError, setHasError] = useState<boolean>(false);
+const [isAuthenticated, setIsAuthenticated] = useState(true);
+const [withBorder, setWithBorder] = useState(false);
+
+// ❌ Bad — boolean state without prefix
+const [loading, setLoading] = useState(false);
+const [authenticated, setAuthenticated] = useState<boolean>(true);
+const [error, setError] = useState<boolean>(false);
+```
+
+**Customization Options:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `booleanPrefixes` | `string[]` | `["is", "has", "with", "without"]` | Replace default prefixes entirely |
+| `extendBooleanPrefixes` | `string[]` | `[]` | Add additional prefixes to defaults |
+| `allowPastVerbBoolean` | `boolean` | `false` | Allow past verb names without prefix (disabled, selected) |
+| `allowContinuousVerbBoolean` | `boolean` | `false` | Allow continuous verb names without prefix (loading, saving) |
+
+```javascript
+// Example: Allow "loading" and "disabled" without prefix
+"code-style/use-state-naming-convention": ["error", {
+    allowPastVerbBoolean: true,
+    allowContinuousVerbBoolean: true
+}]
+
+// Example: Add "should" prefix
+"code-style/use-state-naming-convention": ["error", {
+    extendBooleanPrefixes: ["should"]
+}]
+```
+
+<br />
+
 ## 📥 Import/Export Rules
 
 ### `absolute-imports-only`
@@ -3849,7 +3894,7 @@ const UseAuth = () => {};          // hooks should be camelCase
 
 ## 🔧 Auto-fixing
 
-66 of 75 rules support auto-fixing. Run ESLint with the `--fix` flag:
+67 of 76 rules support auto-fixing. Run ESLint with the `--fix` flag:
 
 ```bash
 # Fix all files in src directory

package/index.d.ts

@@ -33,6 +33,7 @@ export type RuleNames =
     | "code-style/function-params-per-line"
     | "code-style/hook-callback-format"
     | "code-style/hook-deps-per-line"
+    | "code-style/use-state-naming-convention"
     | "code-style/if-else-spacing"
     | "code-style/if-statement-format"
     | "code-style/import-format"

package/index.js

@@ -2115,6 +2115,7 @@ const functionNamingConvention = {
             "build", "make", "generate", "compute", "calculate", "process", "execute", "run",
             "evaluate", "analyze", "measure", "benchmark", "profile", "optimize",
             "count", "sum", "avg", "min", "max", "clamp", "round", "floor", "ceil", "abs",
+            "increment", "decrement", "multiply", "divide", "mod", "negate",
             // Invocation
             "apply", "call", "invoke", "trigger", "fire", "dispatch", "emit", "raise", "signal",
             // Auth
@@ -2216,6 +2217,23 @@ const functionNamingConvention = {
                 if (node.parent && node.parent.type === "VariableDeclarator" && node.parent.id) {
                     name = node.parent.id.name;
                     identifierNode = node.parent.id;
+                } else if (node.parent && node.parent.type === "CallExpression") {
+                    // Check for useCallback wrapped functions: const login = useCallback(() => {...}, [])
+                    // Note: Skip useMemo - it returns computed values, not action functions
+                    const callExpr = node.parent;
+                    const callee = callExpr.callee;
+
+                    // Only check useCallback (not useMemo, useEffect, etc.)
+                    if (callee && callee.type === "Identifier" && callee.name === "useCallback") {
+                        // Check if the function is the first argument to useCallback
+                        if (callExpr.arguments && callExpr.arguments[0] === node) {
+                            // Check if the CallExpression is the init of a VariableDeclarator
+                            if (callExpr.parent && callExpr.parent.type === "VariableDeclarator" && callExpr.parent.id) {
+                                name = callExpr.parent.id.name;
+                                identifierNode = callExpr.parent.id;
+                            }
+                        }
+                    }
                 }
             }
 
@@ -2321,15 +2339,14 @@ const functionNamingConvention = {
             if (!hasVerbPrefix && !hasHandlerSuffix) {
                 context.report({
                     message: `Function "${name}" should start with a verb (get, set, fetch, etc.) AND end with "Handler" (e.g., getDataHandler, clickHandler)`,
-                    node: node.id || node.parent.id,
+                    node: identifierNode,
                 });
             } else if (!hasVerbPrefix) {
                 context.report({
                     message: `Function "${name}" should start with a verb (get, set, fetch, handle, click, submit, etc.)`,
-                    node: node.id || node.parent.id,
+                    node: identifierNode,
                 });
             } else if (!hasHandlerSuffix) {
-                const identifierNode = node.id || node.parent.id;
                 const newName = `${name}Handler`;
 
                 context.report({
@@ -3312,6 +3329,249 @@ const hookDepsPerLine = {
     },
 };
 
+/**
+ * ───────────────────────────────────────────────────────────────
+ * Rule: useState Naming Convention
+ * ───────────────────────────────────────────────────────────────
+ *
+ * Description:
+ *   When useState holds a boolean value, the state variable name
+ *   should start with a valid boolean prefix (is, has, with, without).
+ *
+ * ✓ Good:
+ *   const [isLoading, setIsLoading] = useState(false);
+ *   const [hasError, setHasError] = useState(false);
+ *   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(() => checkAuth());
+ *
+ * ✗ Bad:
+ *   const [loading, setLoading] = useState(false);
+ *   const [authenticated, setAuthenticated] = useState<boolean>(true);
+ *   const [error, setError] = useState<boolean>(false);
+ */
+const useStateNamingConvention = {
+    create(context) {
+        const options = context.options[0] || {};
+
+        // Boolean prefixes handling (same pattern as prop-naming-convention)
+        const defaultBooleanPrefixes = ["is", "has", "with", "without"];
+        const booleanPrefixes = options.booleanPrefixes || [
+            ...defaultBooleanPrefixes,
+            ...(options.extendBooleanPrefixes || []),
+        ];
+
+        const allowPastVerbBoolean = options.allowPastVerbBoolean || false;
+        const allowContinuousVerbBoolean = options.allowContinuousVerbBoolean || false;
+
+        // Pattern to check if name starts with valid boolean prefix followed by capital letter
+        const booleanPrefixPattern = new RegExp(`^(${booleanPrefixes.join("|")})[A-Z]`);
+
+        // Pattern for past verb booleans (ends with -ed: disabled, selected, checked, etc.)
+        const pastVerbPattern = /^[a-z]+ed$/;
+
+        // Pattern for continuous verb booleans (ends with -ing: loading, saving, etc.)
+        const continuousVerbPattern = /^[a-z]+ing$/;
+
+        // Words that suggest "has" prefix instead of "is"
+        const hasKeywords = [
+            "children", "content", "data", "error", "errors", "items",
+            "permission", "permissions", "value", "values",
+        ];
+
+        // Convert name to appropriate boolean prefix
+        const toBooleanNameHandler = (name) => {
+            const lowerName = name.toLowerCase();
+            const prefix = hasKeywords.some((k) => lowerName.includes(k)) ? "has" : "is";
+
+            return prefix + name[0].toUpperCase() + name.slice(1);
+        };
+
+        // Convert setter name based on new state name
+        const toSetterNameHandler = (stateName) => "set" + stateName[0].toUpperCase() + stateName.slice(1);
+
+        // Check if name is a valid boolean state name
+        const isValidBooleanNameHandler = (name) => {
+            // Starts with valid prefix
+            if (booleanPrefixPattern.test(name)) return true;
+
+            // Allow past verb booleans if option is enabled (disabled, selected, checked, etc.)
+            if (allowPastVerbBoolean && pastVerbPattern.test(name)) return true;
+
+            // Allow continuous verb booleans if option is enabled (loading, saving, etc.)
+            if (allowContinuousVerbBoolean && continuousVerbPattern.test(name)) return true;
+
+            return false;
+        };
+
+        // Check if the useState initial value indicates boolean
+        const isBooleanValueHandler = (arg) => {
+            if (!arg) return false;
+
+            // Direct boolean literal: useState(false) or useState(true)
+            if (arg.type === "Literal" && typeof arg.value === "boolean") return true;
+
+            // Arrow function returning boolean: useState(() => checkAuth())
+            // We can't reliably determine return type, so skip these unless typed
+            return false;
+        };
+
+        // Check if the useState has boolean type annotation
+        const hasBooleanTypeAnnotationHandler = (node) => {
+            // useState<boolean>(...) or useState<boolean | null>(...)
+            if (node.typeParameters && node.typeParameters.params && node.typeParameters.params.length > 0) {
+                const typeParam = node.typeParameters.params[0];
+
+                if (typeParam.type === "TSBooleanKeyword") return true;
+
+                // Check union types: boolean | null, boolean | undefined
+                if (typeParam.type === "TSUnionType") {
+                    return typeParam.types.some((t) => t.type === "TSBooleanKeyword");
+                }
+            }
+
+            return false;
+        };
+
+        return {
+            CallExpression(node) {
+                // Check if it's a useState call
+                if (node.callee.type !== "Identifier" || node.callee.name !== "useState") return;
+
+                // Check if it's in a variable declaration with array destructuring
+                if (!node.parent || node.parent.type !== "VariableDeclarator") return;
+                if (!node.parent.id || node.parent.id.type !== "ArrayPattern") return;
+
+                const arrayPattern = node.parent.id;
+
+                // Must have at least the state variable (first element)
+                if (!arrayPattern.elements || arrayPattern.elements.length < 1) return;
+
+                const stateElement = arrayPattern.elements[0];
+                const setterElement = arrayPattern.elements[1];
+
+                if (!stateElement || stateElement.type !== "Identifier") return;
+
+                const stateName = stateElement.name;
+
+                // Check if this is a boolean useState
+                const isBooleanState = (node.arguments && node.arguments.length > 0 && isBooleanValueHandler(node.arguments[0]))
+                    || hasBooleanTypeAnnotationHandler(node);
+
+                if (!isBooleanState) return;
+
+                // Check if state name follows boolean naming convention
+                if (isValidBooleanNameHandler(stateName)) return;
+
+                const suggestedStateName = toBooleanNameHandler(stateName);
+                const suggestedSetterName = toSetterNameHandler(suggestedStateName);
+
+                context.report({
+                    fix(fixer) {
+                        const fixes = [];
+                        const scope = context.sourceCode
+                            ? context.sourceCode.getScope(node)
+                            : context.getScope();
+
+                        // Helper to find variable in scope
+                        const findVariableHandler = (s, name) => {
+                            const v = s.variables.find((variable) => variable.name === name);
+
+                            if (v) return v;
+                            if (s.upper) return findVariableHandler(s.upper, name);
+
+                            return null;
+                        };
+
+                        // Fix state variable
+                        const stateVar = findVariableHandler(scope, stateName);
+                        const stateFixedRanges = new Set();
+
+                        // Fix definition first
+                        const stateDefRangeKey = `${stateElement.range[0]}-${stateElement.range[1]}`;
+
+                        stateFixedRanges.add(stateDefRangeKey);
+                        fixes.push(fixer.replaceText(stateElement, suggestedStateName));
+
+                        // Fix all usages
+                        if (stateVar) {
+                            stateVar.references.forEach((ref) => {
+                                const rangeKey = `${ref.identifier.range[0]}-${ref.identifier.range[1]}`;
+
+                                if (!stateFixedRanges.has(rangeKey)) {
+                                    stateFixedRanges.add(rangeKey);
+                                    fixes.push(fixer.replaceText(ref.identifier, suggestedStateName));
+                                }
+                            });
+                        }
+
+                        // Fix setter if exists
+                        if (setterElement && setterElement.type === "Identifier") {
+                            const setterName = setterElement.name;
+                            const setterVar = findVariableHandler(scope, setterName);
+                            const setterFixedRanges = new Set();
+
+                            // Fix definition first
+                            const setterDefRangeKey = `${setterElement.range[0]}-${setterElement.range[1]}`;
+
+                            setterFixedRanges.add(setterDefRangeKey);
+                            fixes.push(fixer.replaceText(setterElement, suggestedSetterName));
+
+                            // Fix all usages
+                            if (setterVar) {
+                                setterVar.references.forEach((ref) => {
+                                    const rangeKey = `${ref.identifier.range[0]}-${ref.identifier.range[1]}`;
+
+                                    if (!setterFixedRanges.has(rangeKey)) {
+                                        setterFixedRanges.add(rangeKey);
+                                        fixes.push(fixer.replaceText(ref.identifier, suggestedSetterName));
+                                    }
+                                });
+                            }
+                        }
+
+                        return fixes;
+                    },
+                    message: `Boolean state "${stateName}" should start with a valid prefix (${booleanPrefixes.join(", ")}). Use "${suggestedStateName}" instead.`,
+                    node: stateElement,
+                });
+            },
+        };
+    },
+    meta: {
+        docs: { description: "Enforce boolean useState variables to start with is/has/with/without prefix" },
+        fixable: "code",
+        schema: [
+            {
+                additionalProperties: false,
+                properties: {
+                    allowContinuousVerbBoolean: {
+                        default: false,
+                        description: "Allow continuous verb boolean state without prefix (e.g., loading, saving)",
+                        type: "boolean",
+                    },
+                    allowPastVerbBoolean: {
+                        default: false,
+                        description: "Allow past verb boolean state without prefix (e.g., disabled, selected)",
+                        type: "boolean",
+                    },
+                    booleanPrefixes: {
+                        description: "Replace default boolean prefixes entirely",
+                        items: { type: "string" },
+                        type: "array",
+                    },
+                    extendBooleanPrefixes: {
+                        default: [],
+                        description: "Add additional prefixes to the defaults (is, has, with, without)",
+                        items: { type: "string" },
+                        type: "array",
+                    },
+                },
+                type: "object",
+            },
+        ],
+        type: "suggestion",
+    },
+};
+
 /**
  * ───────────────────────────────────────────────────────────────
  * Rule: If Statement Format
@@ -8775,6 +9035,111 @@ const propNamingConvention = {
             return false;
         };
 
+        // Find the containing function for inline type annotations
+        const findContainingFunctionHandler = (node) => {
+            let current = node;
+
+            while (current) {
+                if (current.type === "ArrowFunctionExpression" ||
+                    current.type === "FunctionExpression" ||
+                    current.type === "FunctionDeclaration") {
+                    return current;
+                }
+
+                current = current.parent;
+            }
+
+            return null;
+        };
+
+        // Find matching property in ObjectPattern (destructured params)
+        const findDestructuredPropertyHandler = (funcNode, propName) => {
+            if (!funcNode || !funcNode.params || funcNode.params.length === 0) return null;
+
+            const firstParam = funcNode.params[0];
+
+            if (firstParam.type !== "ObjectPattern") return null;
+
+            // Find the property in the ObjectPattern
+            for (const prop of firstParam.properties) {
+                if (prop.type === "Property" && prop.key && prop.key.type === "Identifier") {
+                    if (prop.key.name === propName) {
+                        return prop;
+                    }
+                }
+            }
+
+            return null;
+        };
+
+        // Create fix that renames type annotation, destructured prop, and all references
+        const createRenamingFixHandler = (fixer, member, propName, suggestedName) => {
+            const fixes = [fixer.replaceText(member.key, suggestedName)];
+
+            // Find the containing function
+            const funcNode = findContainingFunctionHandler(member);
+
+            if (!funcNode) return fixes;
+
+            // Find the matching destructured property
+            const destructuredProp = findDestructuredPropertyHandler(funcNode, propName);
+
+            if (!destructuredProp) return fixes;
+
+            // Get the value node (the actual variable being declared)
+            const valueNode = destructuredProp.value || destructuredProp.key;
+
+            if (!valueNode || valueNode.type !== "Identifier") return fixes;
+
+            // If key and value are the same (shorthand: { copied }), we need to expand and rename
+            // If different (renamed: { copied: isCopied }), just rename the value
+            const isShorthand = destructuredProp.shorthand !== false &&
+                destructuredProp.key === destructuredProp.value;
+
+            if (isShorthand) {
+                // Shorthand syntax: { copied } -> { copied: isCopied }
+                // We need to keep the key (for the type match) and add the renamed value
+                fixes.push(fixer.replaceText(destructuredProp, `${propName}: ${suggestedName}`));
+            } else {
+                // Already renamed syntax or explicit: just update the value
+                fixes.push(fixer.replaceText(valueNode, suggestedName));
+            }
+
+            // Find all references to the variable and rename them
+            const scope = context.sourceCode
+                ? context.sourceCode.getScope(funcNode)
+                : context.getScope();
+
+            // Find the variable in the scope
+            const findVariableHandler = (s, name) => {
+                const v = s.variables.find((variable) => variable.name === name);
+
+                if (v) return v;
+                if (s.upper) return findVariableHandler(s.upper, name);
+
+                return null;
+            };
+
+            const variable = findVariableHandler(scope, propName);
+
+            if (variable) {
+                const fixedRanges = new Set();
+
+                variable.references.forEach((ref) => {
+                    // Skip the definition itself
+                    if (ref.identifier === valueNode) return;
+                    // Skip if already fixed
+                    const rangeKey = `${ref.identifier.range[0]}-${ref.identifier.range[1]}`;
+
+                    if (fixedRanges.has(rangeKey)) return;
+                    fixedRanges.add(rangeKey);
+                    fixes.push(fixer.replaceText(ref.identifier, suggestedName));
+                });
+            }
+
+            return fixes;
+        };
+
         // Check a property signature (interface/type member) - recursive for nested types
         const checkPropertySignatureHandler = (member) => {
             if (member.type !== "TSPropertySignature") return;
@@ -8802,7 +9167,7 @@ const propNamingConvention = {
                     const suggestedName = toBooleanNameHandler(propName);
 
                     context.report({
-                        fix: (fixer) => fixer.replaceText(member.key, suggestedName),
+                        fix: (fixer) => createRenamingFixHandler(fixer, member, propName, suggestedName),
                         message: `Boolean prop "${propName}" should start with a valid prefix (${booleanPrefixes.join(", ")}). Use "${suggestedName}" instead.`,
                         node: member.key,
                     });
@@ -8817,7 +9182,7 @@ const propNamingConvention = {
                     const suggestedName = toCallbackNameHandler(propName);
 
                     context.report({
-                        fix: (fixer) => fixer.replaceText(member.key, suggestedName),
+                        fix: (fixer) => createRenamingFixHandler(fixer, member, propName, suggestedName),
                         message: `Callback prop "${propName}" should start with "${callbackPrefix}" prefix. Use "${suggestedName}" instead.`,
                         node: member.key,
                     });
@@ -18487,8 +18852,54 @@ const folderComponentSuffix = {
 
             // Check if component name ends with the required suffix
             if (!name.endsWith(suffix)) {
+                const newName = `${name}${suffix}`;
+
                 context.report({
-                    message: `Component "${name}" in "${folder}" folder must end with "${suffix}" suffix (e.g., "${name}${suffix}")`,
+                    fix(fixer) {
+                        const scope = context.sourceCode
+                            ? context.sourceCode.getScope(node)
+                            : context.getScope();
+
+                        // Find the variable in scope
+                        const findVariableHandler = (s, varName) => {
+                            const v = s.variables.find((variable) => variable.name === varName);
+
+                            if (v) return v;
+                            if (s.upper) return findVariableHandler(s.upper, varName);
+
+                            return null;
+                        };
+
+                        const variable = findVariableHandler(scope, name);
+
+                        if (!variable) return fixer.replaceText(identifierNode, newName);
+
+                        const fixes = [];
+                        const fixedRanges = new Set();
+
+                        // Fix definition
+                        variable.defs.forEach((def) => {
+                            const rangeKey = `${def.name.range[0]}-${def.name.range[1]}`;
+
+                            if (!fixedRanges.has(rangeKey)) {
+                                fixedRanges.add(rangeKey);
+                                fixes.push(fixer.replaceText(def.name, newName));
+                            }
+                        });
+
+                        // Fix all references
+                        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, newName));
+                            }
+                        });
+
+                        return fixes;
+                    },
+                    message: `Component "${name}" in "${folder}" folder must end with "${suffix}" suffix (e.g., "${newName}")`,
                     node: identifierNode,
                 });
             }
@@ -18502,7 +18913,7 @@ const folderComponentSuffix = {
     },
     meta: {
         docs: { description: "Enforce components in 'views' folder end with 'View' and components in 'pages' folder end with 'Page'" },
-        fixable: null,
+        fixable: "code",
         schema: [],
         type: "suggestion",
     },
@@ -21694,6 +22105,7 @@ export default {
         // Hook rules
         "hook-callback-format": hookCallbackFormat,
         "hook-deps-per-line": hookDepsPerLine,
+        "use-state-naming-convention": useStateNamingConvention,
 
         // Import/Export rules
         "absolute-imports-only": absoluteImportsOnly,

package/package.json

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