eslint-plugin-code-style 1.0.9 → 1.0.14

package/README.md

@@ -7,7 +7,7 @@
 [![License](https://img.shields.io/npm/l/eslint-plugin-code-style?style=for-the-badge&color=blue)](https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/blob/main/LICENSE)
 
 [![ESLint](https://img.shields.io/badge/ESLint-%3E%3D9.0.0-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/)
-[![Node.js](https://img.shields.io/badge/Node.js-%3E%3D24.0.0-339933?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/)
+[![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18.0.0-339933?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/)
 [![React](https://img.shields.io/badge/React-JSX%20Support-61DAFB?style=for-the-badge&logo=react&logoColor=black)](https://react.dev/)
 
 [![GitHub stars](https://img.shields.io/github/stars/Mohamed-Elhawary/eslint-plugin-code-style?style=for-the-badge&logo=github&color=yellow)](https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/stargazers)
@@ -17,20 +17,69 @@
 
 **A powerful ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects.**
 
-*45+ auto-fixable rules to keep your codebase clean and consistent*
+*47 auto-fixable rules to keep your codebase clean and consistent*
+
+</div>
+
+<br />
+
+## 🎯 Why This Plugin?
+
+This plugin provides **rules that don't exist in ESLint's built-in rule set** and are **not available in popular third-party ESLint packages**. These are the style requirements that teams often check manually, making them easy to miss and hard to enforce consistently.
+
+**Key Benefits:**
+- **Fills the gaps** — Covers formatting rules that ESLint and other plugins miss
+- **Works alongside existing tools** — Complements ESLint's built-in rules and packages like `eslint-plugin-react`, `eslint-plugin-import`, etc.
+- **Consistency at scale** — Reduces code-style differences between team members by enforcing uniform formatting across your projects
+- **Fully automated** — All 47 rules support auto-fix, eliminating manual style reviews
+
+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.
+
+<div align="center">
 
 <br />
 
 [Installation](#-installation) •
 [Quick Start](#-quick-start) •
+[Recommended Configs](#-recommended-configurations) •
 [Rules](#-rules-reference) •
-[Examples](#-examples) •
 [Contributing](#-contributing)
 
 </div>
 
 <br />
 
+## 📁 Recommended Configurations
+
+We provide **ready-to-use ESLint flat configuration files** that combine `eslint-plugin-code-style` with carefully selected third-party plugins and ESLint built-in rules. These configurations represent our battle-tested setup that reduces code-style differences by ~95%.
+
+### 💡 Why Use These Configs?
+
+- **Complete Coverage** — Combines ESLint built-in rules, third-party plugins, and all 47 code-style rules
+- **Ready-to-Use** — Copy the config file and start linting immediately
+- **Battle-Tested** — These configurations have been refined through real-world usage
+- **Fully Documented** — Each config includes detailed instructions and explanations
+
+### 📋 Available Configurations
+
+| Configuration | Description | Link |
+|---------------|-------------|------|
+| **React** | React.js projects (JavaScript, JSX) | [View Config](./recommended-configs/react/) |
+| **React + TS + Tailwind** | React + TypeScript + Tailwind CSS | *Coming Soon* |
+| **Next.js + TS + Tailwind** | Next.js + TypeScript + Tailwind CSS | *Coming Soon* |
+
+### ⚡ Quick Start with Recommended Config
+
+1. Navigate to the [recommended-configs](./recommended-configs/) folder
+2. Choose the configuration for your project type
+3. Follow the installation instructions in the README
+4. Copy the `eslint.config.js` to your project root
+5. Run `eslint src/ --fix`
+
+> **Note:** Each configuration includes a detailed README with installation commands, plugin explanations, and rule documentation.
+
+<br />
+
 ---
 
 <br />
@@ -41,13 +90,13 @@
 <tr>
 <td width="50%">
 
-### Auto-Fixable Rules
-All **45+ rules** support automatic fixing with `eslint --fix`. No manual code changes needed.
+### 🔧 Auto-Fixable Rules
+All **47 rules** support automatic fixing with `eslint --fix`. No manual code changes needed.
 
 </td>
 <td width="50%">
 
-### React & JSX Support
+### ⚛️ React & JSX Support
 Built specifically for React projects with comprehensive JSX formatting rules.
 
 </td>
@@ -55,13 +104,13 @@ Built specifically for React projects with comprehensive JSX formatting rules.
 <tr>
 <td width="50%">
 
-### ESLint v9+ Ready
+### ✅ ESLint v9+ Ready
 Designed for ESLint's new flat config system. Modern and future-proof.
 
 </td>
 <td width="50%">
 
-### Zero Dependencies
+### 📭 Zero Dependencies
 Lightweight plugin with no external dependencies. Fast and efficient.
 
 </td>
@@ -83,12 +132,12 @@ pnpm add eslint-plugin-code-style -D
 yarn add eslint-plugin-code-style -D
 ```
 
-### Requirements
+### 📋 Requirements
 
 | Dependency | Version |
 |------------|---------|
 | **ESLint** | `>= 9.0.0` |
-| **Node.js** | `>= 24.0.0` |
+| **Node.js** | `>= 18.0.0` |
 
 <br />
 
@@ -126,25 +175,27 @@ eslint src/ --fix
 
 ```javascript
 rules: {
-    "code-style/absolute-imports-only": "error",
     "code-style/array-items-per-line": "error",
     "code-style/array-objects-on-new-lines": "error",
     "code-style/arrow-function-block-body": "error",
     "code-style/arrow-function-simple-jsx": "error",
     "code-style/arrow-function-simplify": "error",
+    "code-style/curried-arrow-same-line": "error",
     "code-style/assignment-value-same-line": "error",
     "code-style/block-statement-newlines": "error",
     "code-style/comment-spacing": "error",
-    "code-style/curried-arrow-same-line": "error",
-    "code-style/export-format": "error",
     "code-style/function-call-spacing": "error",
     "code-style/function-naming-convention": "error",
     "code-style/function-params-per-line": "error",
     "code-style/hook-callback-format": "error",
     "code-style/hook-deps-per-line": "error",
     "code-style/if-statement-format": "error",
+    "code-style/multiline-if-conditions": "error",
+    "code-style/absolute-imports-only": "error",
+    "code-style/export-format": "error",
     "code-style/import-format": "error",
     "code-style/import-source-spacing": "error",
+    "code-style/module-index-exports": "error",
     "code-style/jsx-children-on-new-line": "error",
     "code-style/jsx-closing-bracket-spacing": "error",
     "code-style/jsx-element-child-new-line": "error",
@@ -155,9 +206,7 @@ rules: {
     "code-style/jsx-string-value-trim": "error",
     "code-style/jsx-ternary-format": "error",
     "code-style/member-expression-bracket-spacing": "error",
-    "code-style/module-index-exports": "error",
     "code-style/multiline-argument-newline": "error",
-    "code-style/multiline-if-conditions": "error",
     "code-style/multiple-arguments-per-line": "error",
     "code-style/nested-call-closing-brackets": "error",
     "code-style/no-empty-lines-in-function-calls": "error",
@@ -170,7 +219,7 @@ rules: {
     "code-style/object-property-value-format": "error",
     "code-style/opening-brackets-same-line": "error",
     "code-style/simple-call-single-line": "error",
-    "code-style/single-argument-on-line": "error",
+    "code-style/single-argument-on-one-line": "error",
     "code-style/string-property-spacing": "error",
     "code-style/variable-naming-convention": "error",
 }
@@ -178,237 +227,1024 @@ rules: {
 
 <br />
 
-## 📖 Rules Reference
-
-> All rules are **auto-fixable** using `eslint --fix`
+---
 
-<br />
+## 📖 Rules Summary
 
-### 📥 Import/Export Rules
+> All **47 rules** are auto-fixable. See detailed examples for each rule in the [Rules Reference](#-rules-reference) section below.
+>
+> Rules marked with ⚙️ support customization options (e.g., extending default folder lists).
 
 | Rule | Description |
 |------|-------------|
-| `absolute-imports-only` | Enforce absolute imports using `@/` alias instead of relative paths |
-| `import-format` | Format imports: `import {` on same line, `} from` on same line, collapse 1-3 specifiers |
+| `array-items-per-line` | Enforce array formatting: 3 or less items on one line, more than 3 each on new line |
+| `array-objects-on-new-lines` | Enforce array of objects to have each object on a new line |
+| `arrow-function-block-body` | Enforce parentheses for arrow functions with multiline expressions |
+| `arrow-function-simple-jsx` | Simplify arrow functions returning simple JSX to single line |
+| `arrow-function-simplify` | Simplify arrow functions in JSX props with single statement block body |
+| `curried-arrow-same-line` | Enforce curried arrow function to start on same line as `=>` |
+| `assignment-value-same-line` | Enforce assignment value on same line as equals sign |
+| `block-statement-newlines` | Enforce newlines after opening brace and before closing brace |
+| `comment-spacing` | Enforce comment spacing and formatting |
+| `function-call-spacing` | Enforce no space between function name and opening parenthesis |
+| `function-naming-convention` | Enforce function naming conventions (camelCase, verb prefix) |
+| `function-params-per-line` | Enforce function parameters on separate lines when multiline |
+| `hook-callback-format` | Enforce consistent formatting for React hooks callbacks |
+| `hook-deps-per-line` | Enforce each hook dependency on its own line when more than 2 |
+| `if-statement-format` | Ensure if statement has proper formatting |
+| `multiline-if-conditions` | Enforce multiline if conditions when there are multiple operands |
+| `absolute-imports-only` | Enforce absolute imports using `@/` alias instead of relative paths ⚙️ |
+| `export-format` | Format exports: collapse 1-3 specifiers, multiline for 4+ |
+| `import-format` | Format imports: collapse 1-3 specifiers, multiline for 4+ |
 | `import-source-spacing` | Enforce no extra spaces inside import path quotes |
-| `export-format` | Format exports: `export {` on same line, collapse 1-3 specifiers, multiline for 4+ |
-| `module-index-exports` | Enforce proper exports in index files |
+| `module-index-exports` | Enforce proper exports in index files ⚙️ |
+| `jsx-children-on-new-line` | Enforce JSX children on separate lines from parent tags |
+| `jsx-closing-bracket-spacing` | No space before `>` or `/>` in JSX tags |
+| `jsx-element-child-new-line` | JSX element children must be on new lines |
+| `jsx-logical-expression-simplify` | Simplify logical expressions in JSX |
+| `jsx-parentheses-position` | Enforce opening parenthesis position for JSX in arrow functions |
+| `jsx-prop-naming-convention` | Enforce JSX prop naming conventions (camelCase) |
+| `jsx-simple-element-one-line` | Simple JSX elements with single child on one line |
+| `jsx-string-value-trim` | Disallow leading/trailing whitespace in JSX string values |
+| `jsx-ternary-format` | Enforce consistent formatting for JSX ternary expressions |
+| `member-expression-bracket-spacing` | Enforce no spaces inside brackets for member expressions |
+| `multiline-argument-newline` | Enforce newlines for function calls with multiline arguments |
+| `multiple-arguments-per-line` | Enforce multiple arguments to each be on their own line |
+| `nested-call-closing-brackets` | Enforce nested function call closing brackets on same line |
+| `no-empty-lines-in-function-calls` | Disallow empty lines in function calls |
+| `no-empty-lines-in-function-params` | Disallow empty lines in function parameters |
+| `no-empty-lines-in-jsx` | Disallow empty lines inside JSX elements |
+| `no-empty-lines-in-objects` | Disallow empty lines inside objects |
+| `no-empty-lines-in-switch-cases` | Prevent empty lines at the beginning of switch case logic |
+| `object-property-per-line` | Enforce each property on its own line when object has 2+ properties |
+| `object-property-value-brace` | Enforce opening brace on same line as colon for object values |
+| `object-property-value-format` | Enforce property value on same line as colon |
+| `opening-brackets-same-line` | Enforce opening brackets on same line for function calls |
+| `simple-call-single-line` | Simplify simple function calls with arrow function to single line |
+| `single-argument-on-one-line` | Enforce single simple argument calls to be on one line |
+| `string-property-spacing` | Enforce no extra spaces inside string property keys |
+| `variable-naming-convention` | Enforce variable naming conventions (camelCase, UPPER_CASE, PascalCase) |
 
 <br />
 
-### ⚡ Function Rules
+---
 
-| Rule | Description |
-|------|-------------|
-| `arrow-function-block-body` | Enforce parentheses for arrow functions with multiline expressions |
-| `arrow-function-simplify` | Simplify arrow functions returning simple JSX to single line |
-| `arrow-function-simple-jsx` | Simplify arrow functions in JSX props with single statement block body |
-| `function-call-spacing` | Enforce no space between function name and opening parenthesis |
-| `function-naming-convention` | Enforce function naming conventions (camelCase) |
-| `function-params-per-line` | Enforce function parameters on separate lines when more than 2 |
-| `curried-arrow-same-line` | Enforce curried arrow function to start on same line as `=>` |
+## 📖 Rules Reference
+
+> All rules are **auto-fixable** using `eslint --fix`
 
 <br />
 
-### 📦 Object Rules
+## 📚 Array Rules
 
-| Rule | Description |
-|------|-------------|
-| `object-property-per-line` | Enforce each property on its own line when object has 2+ properties |
-| `object-property-value-format` | Enforce property value on same line as colon with proper spacing |
-| `object-property-value-brace` | Enforce opening brace on same line as colon for object property values |
-| `no-empty-lines-in-objects` | Disallow empty lines inside objects |
-| `string-property-spacing` | Enforce no extra spaces inside string property keys |
+### `array-items-per-line`
 
-<br />
+Enforce array formatting based on item count. 3 or less items on one line, more than 3 items each on its own line.
 
-### 📚 Array Rules
+```javascript
+// Good
+const arr = [1, 2, 3];
+const arr = [
+    item1,
+    item2,
+    item3,
+    item4,
+];
 
-| Rule | Description |
-|------|-------------|
-| `array-items-per-line` | Enforce array formatting: 3 or less items on one line, more than 3 each on new line |
-| `array-objects-on-new-lines` | Enforce array of objects to have each object on a new line |
+// Bad
+const arr = [1, 2, 3, 4, 5];
+const arr = [item1,
+    item2, item3];
+```
+
+---
+
+### `array-objects-on-new-lines`
+
+In arrays of objects, each object should start on a new line for better readability.
+
+```javascript
+// Good
+const items = [
+    { id: 1, name: "first" },
+    { id: 2, name: "second" },
+];
+
+// Bad
+const items = [{ id: 1, name: "first" },
+    { id: 2, name: "second" }];
+```
 
 <br />
 
-### ⚛️ JSX Rules
+## ➡️ Arrow Function Rules
 
-| Rule | Description |
-|------|-------------|
-| `jsx-children-on-new-line` | Enforce JSX children on separate lines from parent tags |
-| `jsx-closing-bracket-spacing` | No space before `>` or `/>` in JSX tags |
-| `jsx-element-child-new-line` | JSX children that are JSX elements must be on new lines |
-| `jsx-logical-expression-simplify` | Simplify logical expressions in JSX when right side is single-line |
-| `jsx-parentheses-position` | Enforce opening parenthesis position for JSX in arrow functions |
-| `jsx-prop-naming-convention` | Enforce JSX prop naming conventions (camelCase) |
-| `jsx-simple-element-one-line` | Simple JSX elements with only text/expression children on one line |
-| `jsx-string-value-trim` | Disallow leading/trailing whitespace in JSX string values |
-| `jsx-ternary-format` | Enforce consistent formatting for JSX ternary expressions |
-| `no-empty-lines-in-jsx` | Disallow empty lines inside JSX elements |
+### `arrow-function-block-body`
+
+Arrow functions with complex logic should use block body. Ensures consistent formatting when function body needs multiple statements or complex expressions.
+
+```javascript
+// Good
+() => {
+    doSomething();
+    return value;
+}
+
+// Bad
+() => (doSomething(), value)
+```
+
+---
+
+### `arrow-function-simple-jsx`
+
+Simplify arrow functions returning simple JSX to single line by removing unnecessary parentheses and line breaks.
+
+```javascript
+// Good
+export const X = ({ children }) => <Sidebar>{children}</Sidebar>;
+
+// Bad
+export const X = ({ children }) => (
+    <Sidebar>{children}</Sidebar>
+);
+```
+
+---
+
+### `arrow-function-simplify`
+
+Simplify arrow functions that have a single return statement by using implicit return instead of block body.
+
+```javascript
+// Good
+() => value
+(x) => x * 2
+items.map(item => item.name)
+
+// Bad
+() => { return value; }
+(x) => { return x * 2; }
+items.map(item => { return item.name; })
+```
+
+---
+
+### `curried-arrow-same-line`
+
+Curried arrow function body must start on the same line as the arrow (=>), not on a new line.
+
+```javascript
+// Good
+const fn = () => async (dispatch) => {
+    dispatch(action);
+};
+
+// Bad
+const fn = () =>
+    async (dispatch) => {
+        dispatch(action);
+    };
+```
 
 <br />
 
-### 📞 Call Expression Rules
+## 📐 Spacing & Formatting Rules
 
-| Rule | Description |
-|------|-------------|
-| `simple-call-single-line` | Simplify simple function calls with arrow function to single line |
-| `single-argument-on-line` | Enforce single simple argument calls to be on one line |
-| `multiple-arguments-per-line` | Enforce multiple arguments to each be on their own line |
-| `multiline-argument-newline` | Enforce newlines for function calls with multiline arguments |
-| `nested-call-closing-brackets` | Enforce nested function call closing brackets on same line |
-| `no-empty-lines-in-function-calls` | Disallow empty lines in function calls |
-| `opening-brackets-same-line` | Enforce opening brackets on same line for function calls |
+### `assignment-value-same-line`
+
+The value in an assignment should start on the same line as the equals sign, not on a new line.
+
+```javascript
+// Good
+const name = "John";
+const data = {
+    key: "value",
+};
+
+// Bad
+const name =
+    "John";
+const data =
+    {
+        key: "value",
+    };
+```
+
+---
+
+### `block-statement-newlines`
+
+Block statements should have proper newlines after the opening brace and before the closing brace.
+
+```javascript
+// Good
+if (condition) {
+    doSomething();
+}
+
+// Bad
+if (condition) { doSomething(); }
+if (condition) {doSomething();}
+```
+
+---
+
+### `comment-spacing`
+
+Comments should have proper spacing: a space after the opening delimiter (// or block comment opener), and proper blank lines around comment blocks.
+
+```javascript
+// Good
+// This is a comment
+/* This is a block comment */
+
+// Bad
+//This is a comment (missing space)
+/*No space after opener*/
+```
+
+---
+
+### `member-expression-bracket-spacing`
+
+No spaces inside brackets in computed member expressions. The property name should touch both brackets.
+
+```javascript
+// Good
+arr[value]
+obj[key]
+
+// Bad
+arr[ value ]
+obj[ key ]
+```
+
+---
+
+### `no-empty-lines-in-function-params`
+
+Function parameter lists should not contain empty lines between parameters or after opening/before closing parens.
+
+```javascript
+// Good
+function test(
+    param1,
+    param2,
+) {}
+
+// Bad
+function test(
+    param1,
+
+    param2,
+) {}
+```
+
+---
+
+### `variable-naming-convention`
+
+Variable names should follow naming conventions: camelCase for regular variables, UPPER_CASE for constants, and PascalCase for React components.
+
+```javascript
+// Good
+const userName = "John";
+const MAX_RETRIES = 3;
+const UserProfile = () => <div />;
+const useCustomHook = () => {};
+
+// Bad
+const user_name = "John";
+const maxretries = 3;
+const userProfile = () => <div />;
+```
 
 <br />
 
-### 🪝 React Hooks Rules
+## ⚡ Function Rules
 
-| Rule | Description |
-|------|-------------|
-| `hook-callback-format` | Enforce consistent formatting for React hooks (useEffect, useCallback, etc.) |
-| `hook-deps-per-line` | Enforce each hook dependency on its own line when more than 2 dependencies |
+### `function-call-spacing`
+
+No space between function name and opening parenthesis.
+
+```javascript
+// Good
+useDispatch()
+myFunction(arg)
+
+// Bad
+useDispatch ()
+myFunction (arg)
+```
+
+---
+
+### `function-naming-convention`
+
+Function names should follow naming conventions: camelCase, starting with a verb, and handlers ending with "Handler".
+
+```javascript
+// Good
+function getUserData() {}
+function handleClick() {}
+function isValidEmail() {}
+const submitHandler = () => {}
+
+// Bad
+function GetUserData() {}
+function user_data() {}
+function click() {}
+```
+
+---
+
+### `function-params-per-line`
+
+When function parameters span multiple lines, each parameter should be on its own line with consistent indentation.
+
+```javascript
+// Good
+function test(
+    param1,
+    param2,
+    param3,
+) {}
+
+// Bad
+function test(param1,
+    param2, param3) {}
+```
 
 <br />
 
-### 🔀 Control Flow Rules
+## 🪝 React Hooks Rules
 
-| Rule | Description |
-|------|-------------|
-| `if-statement-format` | Ensure if statement has proper formatting |
-| `multiline-if-conditions` | Enforce multiline if conditions when there are more than 3 operands |
-| `no-empty-lines-in-switch-cases` | Prevent empty lines at the beginning of switch case logic |
+### `hook-callback-format`
+
+Enforce consistent formatting for React hooks like useEffect, useCallback, useMemo with callback and dependency array.
+
+```javascript
+// Good
+useEffect(
+    () => { doSomething(); },
+    [dep1, dep2],
+);
+
+// Bad
+useEffect(() => { doSomething(); }, [dep1, dep2]);
+```
+
+---
+
+### `hook-deps-per-line`
+
+React hook dependency arrays with more than 2 dependencies should have each dependency on its own line.
+
+```javascript
+// Good
+useEffect(() => {}, [dep1, dep2])
+useEffect(() => {}, [
+    dep1,
+    dep2,
+    dep3,
+])
+
+// Bad
+useEffect(() => {}, [dep1, dep2, dep3, dep4])
+```
 
 <br />
 
-### 📐 Spacing & Formatting Rules
+## 🔀 Control Flow Rules
 
-| Rule | Description |
-|------|-------------|
-| `assignment-value-same-line` | Enforce assignment value on same line as equals sign |
-| `block-statement-newlines` | Enforce newlines after opening brace and before closing brace |
-| `comment-spacing` | Enforce comment spacing and formatting |
-| `member-expression-bracket-spacing` | Enforce no spaces inside brackets for member expressions |
-| `no-empty-lines-in-function-params` | Disallow empty lines in function parameters |
-| `variable-naming-convention` | Enforce variable naming conventions (camelCase) |
+### `if-statement-format`
+
+If statements should have consistent formatting with the opening brace on the same line as the condition and else on the same line as the closing brace.
+
+```javascript
+// Good
+if (condition) {
+    doSomething();
+} else {
+    doOther();
+}
+
+// Bad
+if (condition)
+{
+    doSomething();
+}
+else
+{
+    doOther();
+}
+```
+
+---
+
+### `multiline-if-conditions`
+
+When an if statement has multiple conditions that span multiple lines, each condition should be on its own line.
+
+```javascript
+// Good
+if (
+    conditionA &&
+    conditionB &&
+    conditionC
+) {}
+
+// Bad
+if (conditionA &&
+    conditionB && conditionC) {}
+```
+
+---
+
+### `no-empty-lines-in-switch-cases`
+
+Switch case blocks should not have empty lines at the beginning of the case logic or between consecutive cases.
+
+```javascript
+// Good
+switch (value) {
+    case 1:
+        return "one";
+    case 2:
+        return "two";
+}
+
+// Bad
+switch (value) {
+    case 1:
+
+        return "one";
+
+    case 2:
+        return "two";
+}
+```
 
 <br />
 
-## 💡 Examples
+## 📥 Import/Export Rules
+
+### `absolute-imports-only`
 
-### Import Formatting
+Enforce absolute imports from index files only for local paths. Local paths (starting with @/) should only import from folder-level index files.
 
 ```javascript
-// ✅ Good - 3 or fewer specifiers on one line
-import { Box, Button, Grid } from "@mui/material";
+// Good
+import { Button } from "@/components";
+import { useAuth } from "@/hooks";
 
-// ✅ Good - 4+ specifiers on multiple lines
-import {
-    Box,
-    Button,
-    Grid,
-    Typography,
-} from "@mui/material";
+// Bad
+import { Button } from "@/components/buttons/primary-button";
+import { useAuth } from "@/hooks/auth/useAuth";
+```
+
+**Default Allowed Folders:**
+`actions`, `apis`, `assets`, `atoms`, `components`, `constants`, `contexts`, `data`, `hooks`, `layouts`, `middlewares`, `providers`, `reducers`, `redux`, `requests`, `routes`, `schemas`, `services`, `store`, `styles`, `theme`, `thunks`, `types`, `utils`, `views`
+
+**Customization Options:**
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `extraAllowedFolders` | `string[]` | Add extra folders to the default list |
+| `extraReduxSubfolders` | `string[]` | Add extra redux subfolders (default: `actions`, `reducers`, `store`, `thunks`, `types`) |
+| `extraDeepImportFolders` | `string[]` | Add extra folders that allow deep imports (default: `assets`) |
+| `aliasPrefix` | `string` | Change the import alias prefix (default: `@/`) |
+| `allowedFolders` | `string[]` | Replace default folders entirely |
+| `reduxSubfolders` | `string[]` | Replace default redux subfolders entirely |
+| `deepImportFolders` | `string[]` | Replace default deep import folders entirely |
+
+```javascript
+// Example: Add custom folders to the defaults
+"code-style/absolute-imports-only": ["error", {
+    extraAllowedFolders: ["features", "modules", "lib"],
+    extraDeepImportFolders: ["images", "fonts"]
+}]
+```
+
+---
+
+### `export-format`
+
+Export statements should have consistent formatting with proper spacing. Collapse 1-3 specifiers on one line, use multiline for 4+ specifiers.
+
+```javascript
+// Good
+export { a, b, c };
+export {
+    a,
+    b,
+    c,
+    d,
+};
+
+// Bad
+export {a,b,c};
+export { a, b, c, d, e };
+```
+
+---
 
-// ❌ Bad
+### `import-format`
+
+Import statements should have consistent formatting with proper spacing. Collapse 1-3 specifiers on one line, use multiline for 4+ specifiers.
+
+```javascript
+// Good
+import { a, b, c } from "module";
 import {
-    Box, Button, Grid } from "@mui/material";
+    a,
+    b,
+    c,
+    d,
+} from "module";
+
+// Bad
+import {a,b,c} from "module";
+import { a, b, c, d, e } from "module";
 ```
 
-<br />
+---
+
+### `import-source-spacing`
 
-### Function Parameters
+No spaces inside import path quotes. The module path should not have leading or trailing whitespace.
 
 ```javascript
-// ✅ Good - 2 or fewer params on one line
-const fn = (a, b) => {};
+// Good
+import { Button } from "@mui/material";
 
-// ✅ Good - 3+ params on separate lines
-const fn = (
-    param1,
-    param2,
-    param3,
-) => {};
+// Bad
+import { Button } from " @mui/material ";
+```
+
+---
+
+### `module-index-exports`
+
+Ensure module folders have index files that export all contents. Each module folder must have an index file that exports all subfolders and files in the module.
+
+```javascript
+// Good
+// index.js
+export { Button } from "./Button";
+export { Input } from "./Input";
+
+// Bad
+// Missing exports in index.js
+```
+
+**Default Module Folders:**
+`apis`, `assets`, `atoms`, `components`, `constants`, `contexts`, `data`, `hooks`, `layouts`, `middlewares`, `providers`, `redux`, `requests`, `routes`, `schemas`, `services`, `styles`, `theme`, `utils`, `views`
+
+**Customization Options:**
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `extraModuleFolders` | `string[]` | Add extra module folders to the default list |
+| `extraLazyLoadFolders` | `string[]` | Add extra lazy load folders (default: `views`) |
+| `extraIgnorePatterns` | `string[]` | Add extra ignore patterns (supports wildcards like `*.stories.js`) |
+| `moduleFolders` | `string[]` | Replace default module folders entirely |
+| `lazyLoadFolders` | `string[]` | Replace default lazy load folders entirely |
+| `ignorePatterns` | `string[]` | Replace default ignore patterns entirely |
+
+**Default Ignore Patterns:**
+`index.js`, `index.jsx`, `index.ts`, `index.tsx`, `.DS_Store`, `__tests__`, `__mocks__`, `*.test.js`, `*.test.jsx`, `*.spec.js`, `*.spec.jsx`
 
-// ❌ Bad
-const fn = (param1, param2, param3) => {};
+```javascript
+// Example: Add custom folders and patterns to the defaults
+"code-style/module-index-exports": ["error", {
+    extraModuleFolders: ["features", "modules", "lib"],
+    extraLazyLoadFolders: ["pages"],
+    extraIgnorePatterns: ["*.stories.js", "*.mock.js"]
+}]
 ```
 
 <br />
 
-### JSX Ternary
+## ⚛️ JSX Rules
+
+### `jsx-children-on-new-line`
+
+When a JSX element has multiple children, each child should be on its own line with proper indentation.
 
 ```javascript
-// ✅ Good - Simple ternary on one line
-{condition ? <Simple /> : <Other />}
+// Good
+<Container>
+    <Header />
+    <Content />
+    <Footer />
+</Container>
+
+// Bad
+<Container><Header /><Content />
+    <Footer /></Container>
+```
+
+---
+
+### `jsx-closing-bracket-spacing`
+
+No space before > or /> in JSX tags. The closing bracket should be directly after the last attribute or tag name.
+
+```javascript
+// Good
+<Button />
+<Button className="primary">
+
+// Bad
+<Button / >
+<Button className="primary" >
+```
+
+---
 
-// ✅ Good - Complex ternary with proper formatting
-{condition ? (
+### `jsx-element-child-new-line`
+
+JSX element children (nested JSX elements) must be on their own line, not on the same line as the opening tag.
+
+```javascript
+// Good
+<Button>
+    <Icon />
+</Button>
+
+// Bad
+<Button><Icon /></Button>
+```
+
+---
+
+### `jsx-logical-expression-simplify`
+
+Simplify JSX logical expressions by removing unnecessary parentheses around conditions and JSX elements.
+
+```javascript
+// Good
+{condition && <Component />}
+{isVisible && <Modal />}
+
+// Bad
+{(condition) && (<Component />)}
+{(isVisible) && (<Modal />)}
+```
+
+---
+
+### `jsx-parentheses-position`
+
+JSX return parentheses should be on the same line as the arrow or return keyword, not on a new line.
+
+```javascript
+// Good
+const Component = () => (
+    <div>content</div>
+);
+return (
+    <div>content</div>
+);
+
+// Bad
+const Component = () =>
+    (
+        <div>content</div>
+    );
+return
+    (
+        <div>content</div>
+    );
+```
+
+---
+
+### `jsx-prop-naming-convention`
+
+Enforce camelCase naming for JSX props. Allows PascalCase for component reference props, and kebab-case for data-* and aria-*.
+
+```javascript
+// Good
+<Button onClick={handler} />
+<Input data-testid="input" />
+<Modal ContentComponent={Panel} />
+
+// Bad
+<Button on_click={handler} />
+<Input test_id="input" />
+```
+
+---
+
+### `jsx-simple-element-one-line`
+
+Simple JSX elements with only a single text or expression child should be collapsed onto a single line.
+
+```javascript
+// Good
+<Button>{buttonLinkText}</Button>
+<Title>Hello</Title>
+
+// Bad
+<Button>
+    {buttonLinkText}
+</Button>
+```
+
+---
+
+### `jsx-string-value-trim`
+
+JSX string attribute values should not have leading or trailing whitespace inside the quotes.
+
+```javascript
+// Good
+className="button"
+title="Hello World"
+
+// Bad
+className=" button "
+title=" Hello World "
+```
+
+---
+
+### `jsx-ternary-format`
+
+Format ternary expressions in JSX with proper structure. Simple branches stay on one line, complex branches get parentheses with proper indentation.
+
+```javascript
+// Good
+{condition ? <Simple /> : <Other />}
+{condition ? <Simple /> : (
     <Complex>
-        <Children />
+        <Child />
     </Complex>
-) : (
-    <Alternative>
-        <Content />
-    </Alternative>
 )}
 
-// ❌ Bad - Empty lines inside ternary
-{condition ? (
+// Bad
+{condition
+    ? <Simple />
+    : <Other />}
+```
 
-    <Button />
+---
 
-) : (
+### `no-empty-lines-in-jsx`
 
-    <Link />
+JSX elements should not contain empty lines between children or after opening/before closing tags.
 
-)}
+```javascript
+// Good
+<div>
+    <span>text</span>
+    <span>more</span>
+</div>
+
+// Bad
+<div>
+
+    <span>text</span>
+
+    <span>more</span>
+
+</div>
 ```
 
 <br />
 
-### React Hooks
+## 📞 Call Expression Rules
+
+### `multiline-argument-newline`
+
+When function arguments span multiple lines, each argument should start on its own line with consistent indentation.
 
 ```javascript
-// ✅ Good
-useEffect(
-    () => {
-        doSomething();
-    },
-    [dependency],
+// Good
+fn(
+    arg1,
+    arg2,
+)
+
+// Bad
+fn(arg1,
+    arg2)
+```
+
+---
+
+### `multiple-arguments-per-line`
+
+When a function call has 2+ arguments, each argument should be on its own line with proper indentation.
+
+```javascript
+// Good
+setValue(
+    "numberOfCopies",
+    null,
+)
+
+// Bad
+setValue("numberOfCopies", null)
+```
+
+---
+
+### `nested-call-closing-brackets`
+
+Nested function calls (like styled-components) should have closing brackets on the same line: }));
+
+```javascript
+// Good
+styled(Card)(({ theme }) => ({
+    color: theme.color,
+}));
+
+// Bad
+styled(Card)(({ theme }) => ({
+    color: theme.color,
+})
 );
+```
 
-// ✅ Good - Simple callback
-useEffect(() => doSomething(), []);
+---
 
-// ❌ Bad
-useEffect(() => {
-    doSomething();
-}, [dependency]);
+### `no-empty-lines-in-function-calls`
+
+Function call arguments should not have empty lines between them or after opening/before closing parentheses.
+
+```javascript
+// Good
+fn(
+    arg1,
+    arg2,
+)
+
+// Bad
+fn(
+    arg1,
+
+    arg2,
+)
+```
+
+---
+
+### `opening-brackets-same-line`
+
+Opening brackets should be on the same line as function/method calls. This applies to objects, arrays, and arrow function parameters.
+
+```javascript
+// Good
+fn({ prop: value })
+.map(({ x }) => x)
+fn([1, 2, 3])
+
+// Bad
+fn(
+    { prop: value }
+)
+.map(
+    ({ x }) => x
+)
+```
+
+---
+
+### `simple-call-single-line`
+
+Simple function calls with an arrow function containing a simple call expression should be on a single line.
+
+```javascript
+// Good
+fn(() => call(arg))
+lazy(() => import("./module"))
+
+// Bad
+fn(
+    () => call(arg),
+)
+```
+
+---
+
+### `single-argument-on-one-line`
+
+Function calls with a single simple argument (literal, identifier, member expression) should be on one line.
+
+```javascript
+// Good
+fn(arg)
+getValue("key")
+obj.method(value)
+
+// Bad
+fn(
+    arg,
+)
 ```
 
 <br />
 
-### Multiline Conditions
+## 📦 Object Rules
+
+### `no-empty-lines-in-objects`
+
+Object literals should not contain empty lines between properties or after opening/before closing braces.
 
 ```javascript
-// ✅ Good - 3 or fewer operands on one line
-if (a && b && c) {}
+// Good
+{
+    a: 1,
+    b: 2,
+}
 
-// ✅ Good - 4+ operands on multiple lines
-if (
-    condition1
-    && condition2
-    && condition3
-    && condition4
-) {}
+// Bad
+{
+    a: 1,
+
+    b: 2,
+}
+```
+
+---
+
+### `object-property-per-line`
+
+When an object has 2 or more properties and spans multiple lines, each property should be on its own line.
+
+```javascript
+// Good
+{
+    name: "John",
+    age: 30,
+}
+
+// Bad
+{ name: "John",
+    age: 30 }
+```
+
+---
+
+### `object-property-value-brace`
+
+Opening brace of an object value should be on the same line as the colon, not on a new line.
+
+```javascript
+// Good
+"& a": { color: "red" }
+
+// Bad
+"& a":
+    { color: "red" }
+```
+
+---
+
+### `object-property-value-format`
 
-// ❌ Bad
-if (condition1 && condition2 && condition3 && condition4) {}
+Object property values should be on the same line as the colon with proper spacing for simple values.
+
+```javascript
+// Good
+{
+    name: "John",
+    age: 30,
+}
+
+// Bad
+{
+    name:
+        "John",
+    age:
+        30,
+}
+```
+
+---
+
+### `string-property-spacing`
+
+String property keys should not have extra leading or trailing spaces inside the quotes.
+
+```javascript
+// Good
+{ "& a": value }
+{ "selector": value }
+
+// Bad
+{ " & a ": value }
+{ " selector ": value }
 ```
 
 <br />
 
+---
+
 ## 🔧 Auto-fixing
 
 All rules support auto-fixing. Run ESLint with the `--fix` flag: