eslint-plugin-code-style 1.7.6 → 1.8.3

package/CHANGELOG.md

@@ -7,6 +7,61 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.8.3] - 2026-02-03
+
+### Fixed
+
+- **`class-naming-convention`** - Auto-fix now renames all references to the class (including instantiations like `new ClassName()` and type annotations), not just the class declaration
+
+---
+
+## [1.8.2] - 2026-02-03
+
+### Changed
+
+- **`multiline-if-conditions`** - Remove configurable `maxNestingLevel` option; nesting level is now fixed at 2 to prevent overly complex conditions. Nested groups with >maxOperands are formatted multiline inline (not extracted). Extraction only occurs when nesting exceeds 2 levels.
+- **`ternary-condition-multiline`** - Remove configurable `maxNestingLevel` option; nesting level is now fixed at 2 to prevent overly complex conditions. Nested groups with >maxOperands are formatted multiline inline (not extracted). Extraction only occurs when nesting exceeds 2 levels.
+- **`opening-brackets-same-line`** - Skip ternary condition tests and detect intentional multiline format to prevent rule conflicts
+- **`if-statement-format`** - Detect intentional multiline conditions to prevent collapsing formatted conditions
+
+### Documentation
+
+- Update both rules to show multiline inline formatting examples instead of extraction
+- Remove `maxNestingLevel` option from documentation (now fixed internally)
+
+---
+
+## [1.8.1] - 2026-02-03
+
+### Changed
+
+- **`function-naming-convention`** - Add `handleXxx` → `xxxHandler` auto-fix (converts `handleClick` to `clickHandler` instead of `handleClickHandler`)
+
+---
+
+## [1.8.0] - 2026-02-03
+
+### Added
+
+- **New Rule: `no-hardcoded-strings`** - Enforce importing strings from constants/strings modules instead of hardcoding them inline. Promotes maintainability, consistency, and easier internationalization.
+  - Detects hardcoded strings in JSX text content, attributes, and component logic
+  - Configurable `ignoreAttributes`, `extraIgnoreAttributes`, `ignorePatterns` options
+  - Automatically ignores technical strings (CSS units, URLs, paths, identifiers, etc.)
+  - Valid import paths: `@/constants`, `@/strings`, `@/@constants`, `@/@strings`, `@/data/constants`, `@/data/strings`
+
+### Changed
+
+- **`absolute-imports-only`** - Add `strings`, `@constants`, `@strings` to default allowed folders
+- **`module-index-exports`** - Add `strings`, `@constants`, `@strings` to default module folders
+
+### Stats
+
+- Total Rules: 70 (was 69)
+- Auto-fixable: 63 rules 🔧
+- Report-only: 7 rules (was 6)
+
+---
+
 ## [1.7.6] - 2026-02-02
 
 ### Changed
@@ -1138,6 +1193,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+[1.8.1]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.8.0...v1.8.1
+[1.8.0]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.7.6...v1.8.0
 [1.7.6]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.7.5...v1.7.6
 [1.7.5]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.7.4...v1.7.5
 [1.7.4]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.7.3...v1.7.4

package/README.md

@@ -19,7 +19,7 @@
 
 **A powerful ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects.**
 
-*69 rules (63 auto-fixable) to keep your codebase clean and consistent*
+*70 rules (63 auto-fixable) to keep your codebase clean and consistent*
 
 </div>
 
@@ -27,7 +27,7 @@
 
 ## 🎯 Why This Plugin?
 
-This plugin provides **69 custom rules** (63 auto-fixable) for code formatting. Built for **ESLint v9 flat configs**.
+This plugin provides **70 custom rules** (63 auto-fixable) for code formatting. Built for **ESLint v9 flat configs**.
 
 > **Note:** ESLint [deprecated 79 formatting rules](https://eslint.org/blog/2023/10/deprecating-formatting-rules/) in v8.53.0. Our recommended configs use `@stylistic/eslint-plugin` as the replacement for these deprecated rules.
 
@@ -36,7 +36,7 @@ This plugin provides **69 custom rules** (63 auto-fixable) for code formatting.
 - **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** — 63 of 69 rules support auto-fix with `eslint --fix`
+- **Highly automated** — 63 of 70 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.
 
@@ -236,6 +236,7 @@ rules: {
     "code-style/no-empty-lines-in-jsx": "error",
     "code-style/no-empty-lines-in-objects": "error",
     "code-style/no-empty-lines-in-switch-cases": "error",
+    "code-style/no-hardcoded-strings": "error",
     "code-style/no-inline-type-definitions": "error",
     "code-style/object-property-per-line": "error",
     "code-style/object-property-value-brace": "error",
@@ -259,7 +260,7 @@ rules: {
 
 ## 📖 Rules Categories
 
-> **69 rules total** — 63 with auto-fix 🔧, 6 report-only. See detailed examples in [Rules Reference](#-rules-reference) below.
+> **70 rules total** — 63 with auto-fix 🔧, 7 report-only. See detailed examples in [Rules Reference](#-rules-reference) below.
 >
 > **Legend:** 🔧 Auto-fixable with `eslint --fix` • ⚙️ Customizable options
 
@@ -299,7 +300,7 @@ rules: {
 | **Function Rules** | |
 | `function-call-spacing` | No space between function name and `(`: `fn()` not `fn ()` 🔧 |
 | `function-declaration-style` | Auto-fix for `func-style`: converts function declarations to arrow expressions 🔧 |
-| `function-naming-convention` | Functions use camelCase, start with verb (get/set/handle/is/has), handlers end with Handler 🔧 |
+| `function-naming-convention` | Functions use camelCase, start with verb, end with Handler suffix; handleXxx → xxxHandler 🔧 |
 | `function-object-destructure` | Non-component functions: use typed params (not destructured), destructure in body; report dot notation access 🔧 |
 | `function-params-per-line` | When multiline, each param on own line with consistent indentation 🔧 |
 | `no-empty-lines-in-function-params` | No empty lines between parameters or after `(`/before `)` 🔧 |
@@ -348,6 +349,8 @@ rules: {
 | `typescript-definition-location` | Enforce TypeScript definitions (interfaces, types, enums) to be in designated folders ⚙️ |
 | **React Rules** | |
 | `react-code-order` | Enforce consistent ordering in components and hooks: props destructure → refs → state → redux → router → context → custom hooks → derived → memo → callback → handlers → effects → return 🔧 |
+| **String Rules** | |
+| `no-hardcoded-strings` | Enforce importing strings from constants/strings modules instead of hardcoding them ⚙️ |
 | **Variable Rules** | |
 | `variable-naming-convention` | camelCase for all variables and constants, PascalCase for components, `use` prefix for hooks 🔧 |
 
@@ -1148,13 +1151,59 @@ if (isAuthenticated &&
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `maxOperands` | `integer` | `3` | Maximum operands to keep on single line |
+| `maxOperands` | `integer` | `3` | Maximum operands to keep on single line. Also applies to nested groups |
 
 ```javascript
 // Example: Allow up to 4 operands on single line
 "code-style/multiline-if-conditions": ["error", { maxOperands: 4 }]
 ```
 
+**Auto-formatting:** Nested groups with >maxOperands are formatted multiline inline:
+
+```javascript
+// ❌ Before (nested group has 4 operands)
+if ((a || b || c || d) && e) {}
+
+// ✅ After auto-fix — formats nested group multiline
+if ((
+    a
+    || b
+    || c
+    || d
+) && e) {}
+```
+
+**Double nesting:** Both levels expand when both exceed maxOperands:
+
+```javascript
+// ❌ Before (both parent and nested have 4 operands)
+if ((a || (c && d && a && b) || c || d) && e) {}
+
+// ✅ After auto-fix — both levels formatted multiline
+if ((
+    a
+    || (
+        c
+        && d
+        && a
+        && b
+    )
+    || c
+    || d
+) && e) {}
+```
+
+**Extraction:** Groups exceeding nesting level 2 are extracted to variables:
+
+```javascript
+// ❌ Before (level 3 nesting)
+if ((a && (b || (c && d))) || e) {}
+
+// ✅ After auto-fix — extracts deepest nested group
+const isCAndD = (c && d);
+if ((a && (b || isCAndD)) || e) {}
+```
+
 ---
 
 ### `no-empty-lines-in-switch-cases`
@@ -1214,6 +1263,9 @@ switch (status) {
 **What it does:** Formats ternary expressions based on condition operand count:
 - ≤maxOperands (default: 3): Always collapse to single line regardless of line length
 - \>maxOperands: Expand to multiline with each operand on its own line
+- Simple parenthesized nested ternaries (≤maxOperands) count as 1 operand and collapse
+- Complex nested ternaries (>maxOperands in their condition) are skipped for manual formatting
+- Nesting level is fixed at 2 to prevent overly complex conditions
 
 **Why use it:** Consistent formatting based on complexity, not line length. Simple conditions stay readable on one line; complex conditions get proper multiline formatting.
 
@@ -1221,13 +1273,16 @@ switch (status) {
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `maxOperands` | `integer` | `3` | Maximum condition operands to keep ternary on single line |
+| `maxOperands` | `integer` | `3` | Maximum condition operands to keep ternary on single line. Also applies to nested groups |
 
 ```javascript
 // ✅ Good — ≤3 operands always on single line
 const x = a && b && c ? "yes" : "no";
 const url = lang === "ar" ? `${apiEndpoints.exam.status}/${jobId}?lang=ar` : `${apiEndpoints.exam.status}/${jobId}`;
 
+// ✅ Good — parenthesized nested ternary counts as 1 operand
+const inputType = showToggle ? (showPassword ? "text" : "password") : type;
+
 // ✅ Good — >3 operands formatted multiline
 const style = variant === "ghost"
     || variant === "ghost-danger"
@@ -1236,6 +1291,19 @@ const style = variant === "ghost"
     ? "transparent"
     : "solid";
 
+// ✅ Good — nested group with >3 operands formatted multiline inline
+const result = (
+    a
+    || (
+        c
+        && d
+        && a
+        && b
+    )
+    || c
+    || d
+) && e ? "yes" : "no";
+
 // ❌ Bad — ≤3 operands split across lines
 const x = a && b && c
     ? "yes"
@@ -1245,6 +1313,19 @@ const x = a && b && c
 const style = variant === "ghost" || variant === "ghost-danger" || variant === "muted" || variant === "primary" ? "transparent" : "solid";
 ```
 
+**Auto-extraction:** Nested groups are auto-extracted to variables only when nesting depth exceeds 2 levels:
+
+```javascript
+// ❌ Before (level 3 nesting exceeds limit)
+const result = (a && (b || (c && d))) || e ? "yes" : "no";
+
+// ✅ After auto-fix — extracts deepest nested group
+const isCAndD = (c && d);
+const result = (a && (b || isCAndD)) || e ? "yes" : "no";
+```
+
+**Note:** When nested groups exceed `maxOperands` but stay within the 2-level nesting limit, they are formatted multiline inline (not extracted).
+
 <br />
 
 ## ⚡ Function Rules
@@ -1316,33 +1397,37 @@ function isAuthenticated(): boolean {
 
 **What it does:** Enforces naming conventions for functions:
 - **camelCase** required
-- **Verb prefix** recommended (get, set, handle, is, has, can, should, etc.)
-- **Event handlers** can use `handle` prefix or `Handler` suffix
+- **Verb prefix** required (get, set, fetch, is, has, can, should, click, submit, etc.)
+- **Handler suffix** required (all functions must end with `Handler`)
+- **Auto-fixes** `handleXxx` to `xxxHandler` (avoids redundant `handleClickHandler`)
+- **Auto-fixes** PascalCase to camelCase for verb-prefixed functions
 
-**Why use it:** Function names should describe actions. Verb prefixes make the purpose immediately clear.
+**Why use it:** Function names should describe actions. Verb prefixes make the purpose immediately clear, and consistent Handler suffix makes event handlers easy to identify.
 
 ```javascript
-// ✅ Good — clear verb prefixes
-function getUserData() {}
-function setUserName(name) {}
-function handleClick() {}
-function handleSubmit() {}
-function isValidEmail(email) {}
-function hasPermission(user) {}
-function canAccess(resource) {}
-function shouldUpdate(props) {}
-const fetchUsers = async () => {};
-const submitHandler = () => {};
+// ✅ Good — verb prefix + Handler suffix
+function getUserDataHandler() {}
+function setUserNameHandler(name) {}
+function clickHandler() {}
+function submitHandler() {}
+function isValidEmailHandler(email) {}
+function hasPermissionHandler(user) {}
+function canAccessHandler(resource) {}
+const fetchUsersHandler = async () => {};
+
+// ❌ Bad (auto-fixed) — handleXxx → xxxHandler
+function handleClick() {}    // → clickHandler
+function handleSubmit() {}   // → submitHandler
+function handleChange() {}   // → changeHandler
 
-// ❌ Bad — no verb, unclear purpose
-function userData() {}
-function userName(name) {}
-function click() {}
-function valid(email) {}
+// ❌ Bad (auto-fixed) — missing Handler suffix
+function getUserData() {}    // → getUserDataHandler
+function setUserName() {}    // → setUserNameHandler
+function fetchUsers() {}     // → fetchUsersHandler
 
-// ❌ Bad — wrong case
-function GetUserData() {}
-function get_user_data() {}
+// ❌ Bad (auto-fixed) — PascalCase to camelCase
+function GetUserData() {}    // → getUserDataHandler
+function FetchStatus() {}    // → fetchStatusHandler
 ```
 
 ---
@@ -3278,6 +3363,73 @@ const YetAnotherBad = ({ title }) => {
 
 <br />
 
+## 📝 String Rules
+
+### `no-hardcoded-strings`
+
+**What it does:** Enforces that user-facing strings should be imported from constants/strings modules rather than hardcoded inline. This promotes maintainability, consistency, and enables easier internationalization.
+
+**Why use it:** Hardcoded strings scattered throughout your codebase are hard to maintain, translate, and keep consistent. Centralizing strings in constants makes them easy to find, update, and potentially translate.
+
+**Options:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `ignoreAttributes` | `string[]` | See below | JSX attributes to ignore (replaces defaults) |
+| `extraIgnoreAttributes` | `string[]` | `[]` | Additional JSX attributes to ignore (extends defaults) |
+| `ignorePatterns` | `string[]` | `[]` | Regex patterns for strings to ignore |
+
+**Default ignored attributes:** `className`, `id`, `type`, `name`, `href`, `src`, `alt`, `role`, `style`, `key`, `data-*`, `aria-*`, and many more HTML/SVG attributes.
+
+**Default ignored patterns:** Empty strings, single characters, CSS units (`px`, `em`, `%`), colors, URLs, paths, file extensions, MIME types, UUIDs, dates, camelCase/snake_case identifiers, HTTP methods, and other technical strings.
+
+```javascript
+// ✅ Good — strings imported from constants
+import { BUTTON_LABEL, ERROR_MESSAGE, welcomeText } from "@/constants";
+import { FORM_LABELS } from "@/strings";
+
+const Component = () => (
+    <div>
+        <button>{BUTTON_LABEL}</button>
+        <span>{ERROR_MESSAGE}</span>
+        <p>{welcomeText}</p>
+    </div>
+);
+
+const getMessage = () => ERROR_MESSAGE;
+
+// ✅ Good — technical strings are allowed
+<input type="text" className="input-field" />
+<a href="/dashboard">Link</a>
+const url = `/api/users/${id}`;
+const size = "100px";
+
+// ❌ Bad — hardcoded user-facing strings
+<button>Submit Form</button>
+<span>Something went wrong</span>
+const message = "Welcome to the application";
+return "User not found";
+```
+
+**Configuration example:**
+
+```javascript
+// Allow more attributes, add custom ignore patterns
+"code-style/no-hardcoded-strings": ["error", {
+    extraIgnoreAttributes: ["tooltip", "placeholder"],
+    ignorePatterns: ["^TODO:", "^FIXME:"]
+}]
+```
+
+**Valid import paths for constants:**
+- `@/constants` or `@/@constants`
+- `@/strings` or `@/@strings`
+- `@/data/constants` or `@/data/strings`
+
+---
+
+<br />
+
 ## 📝 Variable Rules
 
 ### `variable-naming-convention`
@@ -3311,7 +3463,7 @@ const UseAuth = () => {};          // hooks should be camelCase
 
 ## 🔧 Auto-fixing
 
-63 of 69 rules support auto-fixing. Run ESLint with the `--fix` flag:
+63 of 70 rules support auto-fixing. Run ESLint with the `--fix` flag:
 
 ```bash
 # Fix all files in src directory

package/index.d.ts

@@ -59,6 +59,7 @@ export type RuleNames =
     | "code-style/no-empty-lines-in-jsx"
     | "code-style/no-empty-lines-in-objects"
     | "code-style/no-empty-lines-in-switch-cases"
+    | "code-style/no-hardcoded-strings"
     | "code-style/object-property-per-line"
     | "code-style/object-property-value-brace"
     | "code-style/object-property-value-format"
@@ -150,6 +151,7 @@ interface PluginRules {
     "no-empty-lines-in-jsx": Rule.RuleModule;
     "no-empty-lines-in-objects": Rule.RuleModule;
     "no-empty-lines-in-switch-cases": Rule.RuleModule;
+    "no-hardcoded-strings": Rule.RuleModule;
     "object-property-per-line": Rule.RuleModule;
     "object-property-value-brace": Rule.RuleModule;
     "object-property-value-format": Rule.RuleModule;