### Add New Rule to Quick Start Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Add new rules alphabetically to the Quick Start example in README.md. Ensure the rule name is correctly formatted.

```javascript
"code-style/new-rule-name": "error"
```

--------------------------------

### Install ESLint Dependencies

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Install the required ESLint plugins and dependencies for the React configuration.

```bash
npm install --save-dev \
  eslint@^9 \
  @eslint/js@^9 \
  @stylistic/eslint-plugin \
  globals \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-import-x \
  eslint-plugin-jsx-a11y \
  eslint-plugin-check-file \
  eslint-plugin-perfectionist \
  eslint-plugin-simple-import-sort \
  eslint-plugin-code-style
```

```bash
npm install --save-dev eslint@^9 @eslint/js@^9 @stylistic/eslint-plugin globals eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import-x eslint-plugin-jsx-a11y eslint-plugin-check-file eslint-plugin-perfectionist eslint-plugin-simple-import-sort eslint-plugin-code-style
```

--------------------------------

### Detailed Rule Documentation Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Document detailed rule information in `rules/<category>.md` files. Include 'What it does', 'Why use it', code examples for good and bad patterns, and options if applicable.

```markdown
### `new-rule-name`

**What it does:** One-line description of the rule's purpose.

**Why use it:** Context for why this rule is helpful (optional).

```javascript
// ✅ Good — description of correct pattern
const example = "correct code";

// ✅ Good — another correct example
const another = "also correct";

// ❌ Bad — description of incorrect pattern
const example = "incorrect code";

// ❌ Bad — another incorrect example
const wrong = "also wrong";
```

**Options:** (only if rule has options)

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `optionName` | `string` | `"value"` | What the option does |

```javascript
// Configuration example
"code-style/new-rule-name": ["error", { optionName: "value" }]
```

---

```

--------------------------------

### Hook File Naming Convention Examples

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/hooks.md

Examples of valid and invalid file naming patterns for hooks based on module structure and hook type.

```text
// Good — verb hooks include the module name (singular)
hooks/super-admins/use-create-super-admin.ts
hooks/super-admins/use-get-super-admin.ts
hooks/super-admins/use-update-super-admin.ts
hooks/super-admins/use-delete-super-admin.ts

// Good — list hooks use the module name (plural) + "-list"
hooks/super-admins/use-super-admins-list.ts

// Good — chain folders are included between verb and module
hooks/dashboard/super-admins/use-get-dashboard-super-admin.ts
hooks/dashboard/super-admins/use-dashboard-super-admins-list.ts

// Good — files directly in hooks/ are not checked
hooks/use-debounce.ts
hooks/use-local-storage.ts

// Good — files in grouping folders are not checked
hooks/shared/use-auth.ts

// Bad — missing module name
hooks/super-admins/use-create.ts
hooks/super-admins/use-get.ts

// Bad — list hook with wrong pattern
hooks/super-admins/use-list.ts
```

--------------------------------

### Export Padding Examples

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-ts/README.md

Demonstrates the difference in required blank lines between index files and regular files.

```javascript
// index.js - exports grouped without blank lines
export { ComponentA } from "./component-a";
export { ComponentB } from "./component-b";
export { ComponentC } from "./component-c";

// regular-file.js - blank lines required between exports
export const foo = 1;

export const bar = 2;
```

--------------------------------

### Rule documentation example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Standard format for documenting rules and their configuration options.

```javascript
// ✅ Good — description
const example = "correct code";

// ❌ Bad — description
const example = "incorrect code";
```

```javascript
// Configuration example
"code-style/rule-name": ["error", { optionName: "value" }]
```

--------------------------------

### Install Plugin via NPM

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Command to install a specific version of the eslint-plugin-code-style package.

```bash
npm install eslint-plugin-code-style@Y.Y.Y
```

--------------------------------

### Commit Message Examples

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Examples of valid commit messages for different types of changes.

```text
feat: add function-declaration-style rule
fix: allow relative imports in entry files
docs: update options descriptions
```

--------------------------------

### Configure eslint.config.js

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/README.md

Example of importing the plugin and enabling specific rules within the flat configuration file.

```javascript
import codeStyle from "eslint-plugin-code-style";

export default [
    {
        plugins: {
            "code-style": codeStyle,
        },
        rules: {
            // Enable individual rules
            "code-style/import-format": "error",
            "code-style/jsx-children-on-new-line": "error",
            // ... add more rules as needed
        },
    },
];
```

--------------------------------

### Install ESLint Plugin Code Style

Source: https://context7.com/eslint-plugin-code-style/plugin/llms.txt

Install the plugin as a dev dependency using npm, pnpm, or yarn.

```bash
# npm
npm install eslint-plugin-code-style --save-dev
```

```bash
# pnpm
pnpm add eslint-plugin-code-style -D
```

```bash
# yarn
yarn add eslint-plugin-code-style -D
```

--------------------------------

### Install ESLint Dependencies

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-tw/README.md

Installs all necessary ESLint and related plugins for React and Tailwind CSS projects. Ensure you have ESLint v9 or later.

```bash
npm install --save-dev \ 
  eslint@^9 \ 
  @eslint/js@^9 \ 
  @stylistic/eslint-plugin \ 
  globals \ 
  eslint-plugin-react \ 
  eslint-plugin-react-hooks \ 
  eslint-plugin-import-x \ 
  eslint-plugin-jsx-a11y \ 
  eslint-plugin-check-file \ 
  eslint-plugin-perfectionist \ 
  eslint-plugin-simple-import-sort \ 
  eslint-plugin-tailwindcss \ 
  eslint-plugin-code-style
```

```bash
npm install --save-dev eslint@^9 @eslint/js@^9 @stylistic/eslint-plugin globals eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import-x eslint-plugin-jsx-a11y eslint-plugin-check-file eslint-plugin-perfectionist eslint-plugin-simple-import-sort eslint-plugin-tailwindcss eslint-plugin-code-style
```

--------------------------------

### ESLint Configuration Examples

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/typescript.md

Various ways to configure the prop-naming-convention rule in your ESLint configuration file.

```javascript
// Default configuration (strict)
"code-style/prop-naming-convention": "error"

// Allow past verb booleans (disabled, selected, checked, etc.)
"code-style/prop-naming-convention": ["error", {
    allowPastVerbBoolean: true,
}]

// Allow continuous verb booleans (loading, saving, fetching, etc.)
"code-style/prop-naming-convention": ["error", {
    allowContinuousVerbBoolean: true,
}]

// Allow both past and continuous verb booleans
"code-style/prop-naming-convention": ["error", {
```

--------------------------------

### Install eslint-plugin-code-style

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/README.md

Commands to add the plugin as a development dependency using npm, pnpm, or yarn.

```bash
# npm
npm install eslint-plugin-code-style --save-dev

# pnpm
pnpm add eslint-plugin-code-style -D

# yarn
yarn add eslint-plugin-code-style -D
```

--------------------------------

### Install ESLint dependencies

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-ts/README.md

Install the required ESLint v9 packages and plugins for React and TypeScript development.

```bash
npm install --save-dev \
  eslint@^9 \
  @eslint/js@^9 \
  @stylistic/eslint-plugin \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  globals \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-import-x \
  eslint-plugin-jsx-a11y \
  eslint-plugin-check-file \
  eslint-plugin-perfectionist \
  eslint-plugin-simple-import-sort \
  eslint-plugin-code-style
```

```bash
npm install --save-dev eslint@^9 @eslint/js@^9 @stylistic/eslint-plugin @typescript-eslint/parser @typescript-eslint/eslint-plugin globals eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import-x eslint-plugin-jsx-a11y eslint-plugin-check-file eslint-plugin-perfectionist eslint-plugin-simple-import-sort eslint-plugin-code-style
```

--------------------------------

### Install ESLint Dependencies

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v10/react-tw/README.md

Installs ESLint and its associated plugins for React, Tailwind CSS, and code formatting. Ensure your Node.js version meets the requirements.

```bash
npm install --save-dev \
  eslint@^10 \
  @eslint/js@^10 \
  @eslint-react/eslint-plugin \
  @stylistic/eslint-plugin \
  globals \
  eslint-plugin-check-file \
  eslint-plugin-code-style \
  eslint-plugin-import-x \
  eslint-plugin-perfectionist \
  eslint-plugin-simple-import-sort \
  eslint-plugin-tailwindcss
```

```bash
npm install --save-dev eslint@^10 @eslint/js@^10 @eslint-react/eslint-plugin @stylistic/eslint-plugin globals eslint-plugin-check-file eslint-plugin-code-style eslint-plugin-import-x eslint-plugin-perfectionist eslint-plugin-simple-import-sort eslint-plugin-tailwindcss
```

--------------------------------

### Chain Order Configuration Examples (JSON)

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/components.md

Shows how to configure the default chain order for folder names and how to apply per-path overrides for specific directories.

```json
// Default: child-parent (file name first, then folders deepest→shallowest)
// layouts/auth/login.tsx → LoginAuthLayout

// parent-child (folders shallowest→deepest, then file name)
"code-style/folder-based-naming-convention": ["error", { chainOrder: "parent-child" }]
// layouts/auth/login.tsx → AuthLoginLayout

// Per-path override: use parent-child only for specific paths
"code-style/folder-based-naming-convention": ["error", {
    files: [{ paths: ["table/"], chainOrder: "parent-child" }]
}]
// table/actions.tsx → TableActions (parent-child)
// layouts/auth/login.tsx → LoginAuthLayout (default child-parent)

```

--------------------------------

### Install ESLint v10 dependencies

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v10/react-ts/README.md

Install the required ESLint v10 packages as development dependencies.

```bash
npm install --save-dev \
  eslint@^10 \
  @eslint/js@^10 \
  @eslint-react/eslint-plugin \
  @stylistic/eslint-plugin \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  globals \
  eslint-plugin-check-file \
  eslint-plugin-code-style \
  eslint-plugin-import-x \
  eslint-plugin-perfectionist \
  eslint-plugin-simple-import-sort
```

```bash
npm install --save-dev eslint@^10 @eslint/js@^10 @eslint-react/eslint-plugin @stylistic/eslint-plugin @typescript-eslint/parser @typescript-eslint/eslint-plugin globals eslint-plugin-check-file eslint-plugin-code-style eslint-plugin-import-x eslint-plugin-perfectionist eslint-plugin-simple-import-sort
```

--------------------------------

### Install ESLint dependencies

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-ts-tw/README.md

Install the required ESLint v9 packages and plugins for React, TypeScript, and Tailwind CSS support.

```bash
npm install --save-dev \
  eslint@^9 \
  @eslint/js@^9 \
  @stylistic/eslint-plugin \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  globals \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-import-x \
  eslint-plugin-jsx-a11y \
  eslint-plugin-check-file \
  eslint-plugin-perfectionist \
  eslint-plugin-simple-import-sort \
  eslint-plugin-tailwindcss \
  eslint-plugin-code-style
```

```bash
npm install --save-dev eslint@^9 @eslint/js@^9 @stylistic/eslint-plugin @typescript-eslint/parser @typescript-eslint/eslint-plugin globals eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import-x eslint-plugin-jsx-a11y eslint-plugin-check-file eslint-plugin-perfectionist eslint-plugin-simple-import-sort eslint-plugin-tailwindcss eslint-plugin-code-style
```

--------------------------------

### Install ESLint v10 dependencies

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v10/react/README.md

Installs the required ESLint v10 packages and plugins as development dependencies.

```bash
npm install --save-dev \
  eslint@^10 \
  @eslint/js@^10 \
  @eslint-react/eslint-plugin \
  @stylistic/eslint-plugin \
  globals \
  eslint-plugin-check-file \
  eslint-plugin-code-style \
  eslint-plugin-import-x \
  eslint-plugin-perfectionist \
  eslint-plugin-simple-import-sort
```

```bash
npm install --save-dev eslint@^10 @eslint/js@^10 @eslint-react/eslint-plugin @stylistic/eslint-plugin globals eslint-plugin-check-file eslint-plugin-code-style eslint-plugin-import-x eslint-plugin-perfectionist eslint-plugin-simple-import-sort
```

--------------------------------

### Custom ESLint Configuration Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-tw/README.md

Shows how to extend a base ESLint configuration in `eslint.config.js` to override or add custom rules.

```javascript
// In your eslint.config.js
import baseConfig from "./eslint.config.js";

export default [
    ...baseConfig,
    {
        rules: {
            // Override or add rules here
            "code-style/function-naming-convention": "error",
            "max-depth": ["error", 3],
        },
    },
];

```

--------------------------------

### Index Export Padding Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Demonstrates the 'index-export-style' rule, showing how exports are grouped without blank lines in index files.

```javascript
// index.js - exports grouped without blank lines
export { ComponentA } from "./component-a";
export { ComponentB } from "./component-b";
export { ComponentC } from "./component-c";
```

--------------------------------

### Configure useState Naming Convention Options

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/hooks.md

Examples of ESLint configuration for customizing boolean prefix rules.

```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"]
}]
```

--------------------------------

### Install ESLint v10 dependencies

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v10/react-ts-tw/README.md

Installs the required ESLint v10 packages as development dependencies.

```bash
npm install --save-dev \
  eslint@^10 \
  @eslint/js@^10 \
  @eslint-react/eslint-plugin \
  @stylistic/eslint-plugin \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  globals \
  eslint-plugin-check-file \
  eslint-plugin-code-style \
  eslint-plugin-import-x \
  eslint-plugin-perfectionist \
  eslint-plugin-simple-import-sort \
  eslint-plugin-tailwindcss
```

```bash
npm install --save-dev eslint@^10 @eslint/js@^10 @eslint-react/eslint-plugin @stylistic/eslint-plugin @typescript-eslint/parser @typescript-eslint/eslint-plugin globals eslint-plugin-check-file eslint-plugin-code-style eslint-plugin-import-x eslint-plugin-perfectionist eslint-plugin-simple-import-sort eslint-plugin-tailwindcss
```

--------------------------------

### Singularization Examples for File Naming

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/components.md

Demonstrates how folder names are singularized for named files and preserved as plural for index files when constructing the final identifier.

```text
// Named files — folders are singularized
discount/types/code.tsx     → CodeTypeDiscount (not CodeTypesDiscount)
table-items/actions.tsx     → ActionsTableItem (not ActionsTableItems)

// Index files — folders keep plural
discount/types/index.tsx    → TypesDiscount (plural preserved)
audit-logs/index.tsx        → AuditLogs (plural preserved)

```

--------------------------------

### Multi-feature Commit Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Format for commits that include multiple features or enhancements.

```text
feat: add function-declaration-style rule and enhancements

New rule:
- function-declaration-style: auto-fixes to arrow expressions

Enhancements:
- function-naming-convention: add auto-fix
```

--------------------------------

### Add test cases

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Structure for defining good and bad code examples in a temporary test file.

```javascript
// Temporary test file

// Should trigger the rule (BAD - test this fails)
const badCode = /* code that should fail */;

// Should pass (GOOD - test this passes)
const goodCode = /* code that should pass */;
```

--------------------------------

### Configure prop-naming-convention rule

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/typescript.md

Examples for configuring property naming conventions, including extending boolean prefixes, replacing defaults, and allowing specific suffixes.

```javascript
// Extend default prefixes with additional ones
"code-style/prop-naming-convention": ["error", {
    extendBooleanPrefixes: ["should", "can", "will", "did"],
}]
```

```javascript
// Replace default prefixes entirely
"code-style/prop-naming-convention": ["error", {
    booleanPrefixes: ["is", "has"],  // Only these prefixes allowed
}]
```

```javascript
// Allow "xxxAction" suffix for callbacks
"code-style/prop-naming-convention": ["error", {
    allowActionSuffix: true,  // Allows: submitAction, copyAction, deleteAction
}]
```

```javascript
// Full custom configuration
"code-style/prop-naming-convention": ["error", {
    extendBooleanPrefixes: ["should", "can"],
    allowPastVerbBoolean: true,
    allowContinuousVerbBoolean: true,
    callbackPrefix: "on",
    allowActionSuffix: true,
}]
```

--------------------------------

### TypeScript Formatting and Location Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-ts/README.md

Demonstrates correct and incorrect TypeScript formatting, naming conventions, and file location for interfaces, types, and enums. Use this to ensure consistency across your TypeScript definitions.

```typescript
// ✅ Good — proper TypeScript formatting and location
// src/interfaces/user.ts
export interface UserInterface {
    email: string,
    id: string,
    name: string,
}

// src/types/config.ts
export type ApiResponseType<T> = {
    data: T,
    status: number,
};

// src/enums/status.ts
export enum UserRoleEnum {
    ADMIN = "admin",
    GUEST = "guest",
    USER = "user",
}

// ❌ Bad — wrong naming and formatting
export interface User {        // Missing Interface suffix
    Email: string;             // Should be camelCase, use comma
}

export enum Status {           // Missing Enum suffix
    active = "active",         // Should be UPPER_CASE
}
```

--------------------------------

### Configure type-format rule

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/typescript.md

Example configuration for the type-format rule to adjust the minimum union members required for multiline formatting.

```javascript
// Configuration example - require multiline for 4+ union members
"code-style/type-format": ["error", { minUnionMembersForMultiline: 4 }]
```

--------------------------------

### Temporary Test File Content

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Populate the temporary test file with examples that should trigger and not trigger the rule being developed.

```javascript
// Temporary test file: test-rule-name.tsx

// Test case 1: Should trigger error (BAD code)
const badExample = /* code that violates the rule */;

// Test case 2: Should NOT trigger error (GOOD code)
const goodExample = /* code that follows the rule */;
```

--------------------------------

### Configure module-index-exports Rule

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/imports-exports.md

Example configuration for the `module-index-exports` ESLint rule, demonstrating how to add custom module folders, lazy-load folders, and ignore patterns.

```javascript
"code-style/module-index-exports": ["error", {
    extraModuleFolders: ["features", "modules"],
    extraLazyLoadFolders: ["screens"],
    extraIgnorePatterns: ["*.stories.js", "*.mock.js"]
}]
```

--------------------------------

### Folder-Based Naming Convention Examples (TSX)

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/components.md

Illustrates correct naming conventions for various folder types, including suffix folders, camelCase suffix folders, and no-suffix folders where chaining is applied. Also shows common naming errors.

```tsx
// Good — suffix folders
// in views/dashboard.tsx
export const DashboardView = () => <div>Dashboard</div>;

// in layouts/auth/login.tsx (chained: Login + Auth(singular) + Layout)
export const LoginAuthLayout = () => <div>Login</div>;

// in providers/auth.tsx
export const AuthProvider = ({ children }) => <AuthContext.Provider>{children}</AuthContext.Provider>;

// in contexts/auth.ts
export const AuthContext = createContext(null);

// in reducers/user.ts
export const UserReducer = (state, action) => { ... };

// in themes/dark.ts
export const DarkTheme = { primary: "#000" };

// Good — camelCase suffix folders
// in data/auth.ts
export const authData = { ... };

// in constants/api.ts
export const apiConstants = { ... };

// in strings/login.ts
export const loginStrings = { ... };

// in services/user.ts
export const userServices = { ... };

// Good — no-suffix folders (chaining only)
// in atoms/input/password.tsx (chained: Password + Input)
export const PasswordInput = () => <input type="password" />;

// in atoms/button.tsx
export const Button = () => <button>Click</button>;

// in components/card.tsx
export const Card = () => <div>Card</div>;

// Bad
// in layouts/auth/login.tsx (should be "LoginAuthLayout")
export const Login = () => <div>Login</div>;

// in reducers/user.ts (should be "UserReducer")
export const User = (state, action) => { ... };

// in atoms/input/password.tsx (should be "PasswordInput")
export const Password = () => <input type="password" />;

```

--------------------------------

### Non-Index Export Padding Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Illustrates the 'index-export-style' rule for non-index files, requiring blank lines between exports.

```javascript
// regular-file.js - blank lines required between exports
export const foo = 1;

export const bar = 2;
```

--------------------------------

### Boolean useState Naming Convention Examples

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/hooks.md

Demonstrates correct and incorrect naming for boolean state variables using standard prefixes.

```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);
```

--------------------------------

### Configure Extra Allowed Folders and Deep Import Folders

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/imports-exports.md

Example ESLint configuration for the `absolute-imports-only` rule, demonstrating how to specify custom folders for absolute imports and folders that allow deep imports.

```javascript
"code-style/absolute-imports-only": ["error", {
    extraAllowedFolders: ["features", "modules"],
    extraDeepImportFolders: ["images", "fonts"]
}]
```

--------------------------------

### Tailwind CSS Class Ordering and Shorthand Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-tw/README.md

Demonstrates correct and incorrect usage of Tailwind CSS classes regarding sorting and shorthand notation.

```jsx
// ✅ Good — sorted classes, using shorthand
<div className="flex items-center justify-between p-4 text-lg font-bold">

// ❌ Bad — unsorted classes, not using shorthand
<div className="font-bold text-lg justify-between items-center flex px-4 py-4">

```

--------------------------------

### Run Tests

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Executes linting checks and auto-fixes issues within a test application. Navigate to the test directory and install dependencies before running.

```bash
cd _tests_/<config-name>
npm install
npm run lint
npm run lint:fix
```

--------------------------------

### ESLint Configuration Override Example

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-ts/README.md

Shows how to override or add ESLint rules in your eslint.config.js file. This is useful for customizing the linting behavior for your specific project needs.

```javascript
// In your eslint.config.js
import baseConfig from "./eslint.config.js";

export default [
    ...baseConfig,
    {
        rules: {
            // Override or add rules here
            "code-style/function-naming-convention": "error",
            "max-depth": ["error", 3],
        },
    },
];
```

--------------------------------

### Configure Function Argument Formatting

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/call-expressions.md

Examples of configuring the `function-arguments-format` rule. Use `minArgs` to set the minimum number of arguments for multiline formatting, and `skipHooks` to control skipping React hooks.

```javascript
// Example: Require multiline for 3+ arguments
"code-style/function-arguments-format": ["error", { minArgs: 3 }]
```

```javascript
// Example: Don't skip React hooks
"code-style/function-arguments-format": ["error", { skipHooks: false }]
```

--------------------------------

### Running ESLint with Auto-Fix

Source: https://context7.com/eslint-plugin-code-style/plugin/llms.txt

Execute ESLint with the `--fix` flag to automatically resolve formatting issues for many rules. Examples show how to fix all files in a directory, a specific file, or files with certain extensions.

```bash
# Fix all files in src directory
eslint src/ --fix
```

```bash
# Fix specific file
eslint src/components/MyComponent.jsx --fix
```

```bash
# Fix with specific extensions
eslint "src/**/*.{js,jsx,ts,tsx}" --fix
```

--------------------------------

### Capitalized Comments Configuration

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Requires comments to start with a capital letter for a professional appearance. Example: `// This is a comment`.

```json
"capitalized-comments": "error"
```

--------------------------------

### Absolute Imports Only Rule Examples

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/imports-exports.md

Demonstrates correct and incorrect import patterns enforced by the `absolute-imports-only` rule. It shows how to use absolute imports with aliases for external modules and relative imports within the same module folder to prevent circular dependencies.

```javascript
// Good — import from index files using alias
import { Button, Input } from "@/components";
import { useAuth, useUser } from "@/hooks";
import { fetchUsers } from "@/apis";
import { formatDate } from "@/utils";

// Good — assets allow deep imports by default
import logo from "@/assets/images/logo.png";

// Good — relative import within the same module folder (siblings)
// File: utils/formatters.js
import { isNumber } from "./validators";

// Good — relative import within the same module folder (nested)
// File: data/auth/forget-password/index.ts
import { guestLoginData } from "../../login/guest";

// Bad — absolute import to own module folder (should use relative)
// File: data/auth/forget-password/index.ts
import { guestLoginData } from "@/data";
// → use relative import instead: import { guestLoginData } from "../../login/guest";

// Bad — relative imports across different folders
import { Button } from "../../components";
import { useAuth } from "../../../hooks";

// Bad — deep imports into component internals
import { Button } from "@/components/buttons/primary-button";
import { useAuth } from "@/hooks/auth/useAuth";
import { fetchUsers } from "@/apis/users/fetchUsers";
```

--------------------------------

### Build the plugin

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Regenerates the distribution files from the source code.

```bash
npm run build    # Required — regenerates dist/index.js from src/
```

--------------------------------

### Create a temporary test file

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Paths for creating test files to verify rule behavior.

```bash
# Create in appropriate project(s)
_tests_/v9/react-ts-tw/src/test-rule-name.tsx   # For TS rules
_tests_/v9/react/src/test-rule-name.jsx         # For general rules (test in both)
```

--------------------------------

### Ternary Condition Multiline Examples

Source: https://context7.com/eslint-plugin-code-style/plugin/llms.txt

Examples demonstrating the 'ternary-condition-multiline' rule. Expressions with 3 or fewer operands remain inline, while those with 4 or more are formatted across multiple lines. Parenthesized nested ternaries count as a single operand.

```javascript
// Good — <=3 operands always on single line
const x = a && b && c ? "yes" : "no";
```

```javascript
// Good — parenthesized nested ternary counts as 1 operand
const inputType = showToggle ? (showPassword ? "text" : "password") : type;
```

```javascript
// Good — >3 operands formatted multiline
const style = variant === "ghost"
    || variant === "ghost-danger"
    || variant === "muted"
    || variant === "primary"
    ? "transparent"
    : "solid";
```

```javascript
// Bad — >3 operands on single line (auto-fixed)
const style = variant === "ghost" || variant === "ghost-danger" || variant === "muted" || variant === "primary" ? "transparent" : "solid";
```

--------------------------------

### Get tokens

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Retrieves specific tokens relative to a node.

```javascript
const openBracket = sourceCode.getFirstToken(node);
const closeBracket = sourceCode.getLastToken(node);
const tokenBefore = sourceCode.getTokenBefore(node);
const tokenAfter = sourceCode.getTokenAfter(node);
```

--------------------------------

### Build Project

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Bundles the source code into the `dist/` directory using esbuild. This command is required before testing or publishing the package.

```bash
npm run build
```

--------------------------------

### Test Configuration

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Runs the linter against a specific configuration to verify consistency.

```bash
cd _tests_/<config-name>
npm run lint
```

--------------------------------

### Get text

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Retrieves the text representation of a node or the full lines array.

```javascript
const text = sourceCode.getText(node);
const lines = sourceCode.lines;  // Array of all lines
```

--------------------------------

### Configure Import Resolver Settings

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-tw/README.md

Define file extensions and resolution paths for the import resolver.

```javascript
settings: {
    "import-x/extensions": [".js", ".jsx"],
    "import-x/resolver": {
        node: {
            extensions: [".js", ".jsx"],
            paths: ["src"],
        },
    },
}
```

--------------------------------

### Implement Auto-fix

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Example of adding a fix function to the context.report method when implementing rule auto-fixes.

```javascript
context.report({
    fix: (fixer) => fixer.replaceText(node, "fixed code"),
    message: "Error message",
    node,
});
```

--------------------------------

### Run tests

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Commands to verify rule reporting, auto-fixing, and regression testing.

```bash
cd _tests_/v9/react-ts-tw
npx eslint src/test-rule-name.tsx          # Verify error is reported
npx eslint src/test-rule-name.tsx --fix    # Verify auto-fix works
npx eslint src/                            # Ensure no regressions
```

--------------------------------

### Key Spacing Configuration

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Ensures a space after the colon in object key-value pairs. Example: `{ key: value }`.

```json
"@stylistic/key-spacing": "default (afterColon: true)"
```

--------------------------------

### Run Linter in Test Directory

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Navigate to the specific test project directory and run the linter to verify the new rule's behavior.

```bash
cd _tests_/v9/react-ts-tw
```

--------------------------------

### Enforce Comment Formatting Standards

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/comments.md

Examples of valid and invalid comment styles enforced by the comment-format rule.

```javascript
// Good — proper spacing
// This is a comment
/* This is a block comment */

/*
 * This is a multi-line
 * block comment
 */

// Good — file-top comments without gaps
// File: utils.js
// Author: John Doe
// License: MIT

// Bad — missing space after //
//This is a comment

// Bad — no space in block comment
/*No space*/

// Bad — single-line block should be line comment
/* This should use // syntax */
```

--------------------------------

### Version Bump Commit Messages

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Examples of descriptive commit messages for version releases compared to generic ones.

```text
chore: release v1.7.2 - fix double comma bug in enum/interface format
chore: release v1.7.1 - multiple rule fixes for destructuring and ternaries
chore: release v1.6.0 - add 3 new rules and enhance ternary formatting
```

```text
chore: bump version to 1.7.2
chore: version bump
chore: v1.7.2
```

--------------------------------

### Configure simple-import-sort rules

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-ts-tw/README.md

Automates the ordering of import and export statements.

```json
simple-import-sort/imports: error
simple-import-sort/exports: error
```

--------------------------------

### Dot Location Configuration

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Specifies that the dot should remain with the object in chained method calls. Example: `obj\n  .method()`.

```json
"@stylistic/dot-location": "default (object)"
```

--------------------------------

### Object Curly Spacing Configuration

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Enforces spaces inside object braces for improved readability. Example: `{ a, b }`.

```json
"@stylistic/object-curly-spacing": "always"
```

--------------------------------

### Recommended Configuration for React + TypeScript + Tailwind

Source: https://context7.com/eslint-plugin-code-style/plugin/llms.txt

Use the provided recommended configuration which includes all 81 code-style rules and integrates with other essential ESLint plugins.

```javascript
import js from "@eslint/js";
import stylistic from "@stylistic/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import tsPlugin from "@typescript-eslint/eslint-plugin";
import codeStyle from "eslint-plugin-code-style";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import tailwind from "eslint-plugin-tailwindcss";

export default [
    {
        ignores: [".next/**", "dist/**", "node_modules/**"],
    },
    js.configs.recommended,
    ...tailwind.configs["flat/recommended"],
    {
        files: ["**/*.{js,jsx,ts,tsx}"],
        languageOptions: {
            parser: tsParser,
            parserOptions: {
                ecmaFeatures: { jsx: true },
            },
        },
        plugins: {
            "@stylistic": stylistic,
            "@typescript-eslint": tsPlugin,
            "code-style": codeStyle,
            react,
            "react-hooks": reactHooks,
        },
        rules: {
            ...react.configs.recommended.rules,
            ...reactHooks.configs.recommended.rules,
            ...tsPlugin.configs.recommended.rules,

            // Code style rules (all 81)
            "code-style/absolute-imports-only": "error",
            "code-style/array-items-per-line": "error",
            "code-style/component-props-destructure": "error",
            "code-style/component-props-inline-type": "error",
            "code-style/enum-format": "error",
            "code-style/function-naming-convention": "error",
            "code-style/hook-callback-format": "error",
            "code-style/import-format": "error",
            "code-style/interface-format": "error",
            "code-style/jsx-children-on-new-line": "error",
            "code-style/react-code-order": "error",
            "code-style/type-format": "error",
            "code-style/variable-naming-convention": "error",
            // ... additional rules
        },
    },
];
```

--------------------------------

### Handle options with defaults

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Safely retrieves rule options and applies default values.

```javascript
const options = context.options[0] || {};
const maxItems = options.maxItems !== undefined ? options.maxItems : 3;
```

--------------------------------

### Allow Continuous Verb Booleans

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/typescript.md

Configuration example enabling the use of continuous tense verbs (ending in -ing) for boolean props.

```typescript
// Allowed with allowContinuousVerbBoolean: true
interface PropsInterface {
    loading: boolean,     // Continuous verb - ends with -ing
    saving: boolean,      // Continuous verb - ends with -ing
    fetching: boolean,    // Continuous verb - ends with -ing
    closing: boolean,     // Continuous verb - ends with -ing
    opening: boolean,     // Continuous verb - ends with -ing
    submitting: boolean,  // Continuous verb - ends with -ing
    processing: boolean,  // Continuous verb - ends with -ing
    updating: boolean,    // Continuous verb - ends with -ing
    deleting: boolean,    // Continuous verb - ends with -ing
    pending: boolean,     // Continuous verb - ends with -ing
}
```

--------------------------------

### Curly Braces Rule Configuration

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Requires braces for multi-line blocks but allows omitting them for single-line statements. Example: `if (x) return;`.

```json
"curly": "multi-or-nest"
```

--------------------------------

### Allow Past Verb Booleans

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/typescript.md

Configuration example enabling the use of past tense verbs (ending in -ed) for boolean props.

```typescript
// Allowed with allowPastVerbBoolean: true
interface PropsInterface {
    disabled: boolean,    // Past verb - ends with -ed
    selected: boolean,    // Past verb - ends with -ed
    checked: boolean,     // Past verb - ends with -ed
    opened: boolean,      // Past verb - ends with -ed
    closed: boolean,      // Past verb - ends with -ed
    expanded: boolean,    // Past verb - ends with -ed
    collapsed: boolean,   // Past verb - ends with -ed
    focused: boolean,     // Past verb - ends with -ed
    hidden: boolean,      // Past verb - ends with -ed
    connected: boolean,   // Past verb - ends with -ed
}
```

--------------------------------

### Create Temporary Test File

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/AGENTS.md

Create a temporary TypeScript file in the test project for quick rule verification during development.

```bash
# Create temp test file
_tests_/v9/react-ts-tw/src/test-rule-name.tsx
```

--------------------------------

### Enforce Prop Naming Conventions in TypeScript

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/typescript.md

Examples of compliant and non-compliant prop naming patterns in interfaces, types, and inline definitions.

```typescript
// Good — proper prop naming
interface ButtonPropsInterface {
    isDisabled: boolean,
    isLoading: boolean,
    hasError: boolean,
    onClick: () => void,
    onSubmit: (data: FormData) => void,
}

type CardPropsType = {
    isExpanded: boolean,
    hasChildren: boolean,
    onToggle: () => void,
};

// Good — nested types are also checked
interface FormPropsInterface {
    isValid: boolean,
    config: {
        isEnabled: boolean,      // Nested - checked
        onValidate: () => void,  // Nested - checked
        settings: {
            isActive: boolean,   // Deep nested - also checked
        },
    },
}

// Good — inline component props
const Button = ({
    isLoading,
    onClick,
}: {
    isLoading: boolean,
    onClick: () => void,
}) => { ... };

// Bad — missing prefixes
interface ButtonPropsInterface {
    disabled: boolean,    // Should be isDisabled
    loading: boolean,     // Should be isLoading
    error: boolean,       // Should be hasError
    click: () => void,    // Should be onClick
    handleSubmit: () => void,  // Should be onSubmit
}

// Bad — nested types also checked
type PropsType = {
    config: {
        enabled: boolean,  // Should be isEnabled
        toggle: () => void, // Should be onToggle
    },
};
```

--------------------------------

### Configure Import Resolver Settings

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react-ts/README.md

Set up TypeScript-aware import resolution including supported extensions and base paths.

```javascript
settings: {
    "import-x/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import-x/parsers": {
        "@typescript-eslint/parser": [".ts", ".tsx"],
    },
    "import-x/resolver": {
        node: {
            extensions: [".js", ".jsx", ".ts", ".tsx"],
            paths: ["src"],
        },
    },
}
```

--------------------------------

### Configuring no-hardcoded-strings rule

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/rules/strings.md

Example of how to configure the `no-hardcoded-strings` ESLint rule to allow additional JSX attributes and custom ignore patterns.

```javascript
// Allow more attributes, add custom ignore patterns
"code-style/no-hardcoded-strings": ["error", {
    extraIgnoreAttributes: ["tooltip", "placeholder"],
    ignorePatterns: ["^TODO:", "^FIXME:"]
}]
```

--------------------------------

### Non-block Statement Body Position Configuration

Source: https://github.com/eslint-plugin-code-style/plugin/blob/main/recommended-configs/v9/react/README.md

Allows single-line if statement bodies to be placed beside the keyword. Example: `if (x) return;`.

```json
"@stylistic/nonblock-statement-body-position": "default (beside)"
```