eslint-plugin-code-style 2.0.0 → 2.0.2

package/docs/rules/objects.md

@@ -1,224 +0,0 @@
-# Object Rules
-
-### `no-empty-lines-in-objects`
-
-**What it does:** Removes empty lines within object literals — between properties and after opening/before closing braces.
-
-**Why use it:** Empty lines inside objects break the visual grouping of properties. Properties should flow as a cohesive unit.
-
-```javascript
-// ✅ Good — no empty lines
-const user = {
-    name: "John",
-    email: "john@example.com",
-    role: "admin",
-};
-
-const config = {
-    host: "localhost",
-    port: 3000,
-    debug: true,
-};
-
-// ❌ Bad — empty line between properties
-const user = {
-    name: "John",
-
-    email: "john@example.com",
-
-    role: "admin",
-};
-
-// ❌ Bad — empty line after opening brace
-const config = {
-
-    host: "localhost",
-    port: 3000,
-};
-
-// ❌ Bad — empty line before closing brace
-const config = {
-    host: "localhost",
-    port: 3000,
-
-};
-```
-
----
-
-### `object-property-per-line`
-
-**What it does:** Controls object formatting based on property count:
-- 1 property: stays on single line `{ name: "John" }`
-- 2+ properties: expands with `{` and `}` on own lines, each property on its own line
-
-**Why use it:** Single-property objects are clear on one line. Multiple properties need expansion for readability and clean diffs.
-
-```javascript
-// ✅ Good — single property stays compact
-const point = { x: 10 };
-const config = { debug: true };
-fn({ callback: handleClick });
-
-// ✅ Good — 2+ properties get full expansion
-const point = {
-    x: 10,
-    y: 20,
-};
-
-const user = {
-    name: "John",
-    email: "john@example.com",
-    role: "admin",
-};
-
-// ✅ Good — nested objects follow same rules
-const config = {
-    server: { port: 3000 },
-    database: {
-        host: "localhost",
-        name: "mydb",
-    },
-};
-
-// ❌ Bad — multiple properties on one line
-const point = { x: 10, y: 20 };
-const user = { name: "John", email: "john@example.com" };
-
-// ❌ Bad — inconsistent formatting
-const point = { x: 10,
-    y: 20 };
-```
-
-**Options:**
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `minProperties` | `integer` | `2` | Minimum properties to trigger expansion |
-
-```javascript
-// Example: Require 3+ properties for expansion
-"code-style/object-property-per-line": ["error", { minProperties: 3 }]
-```
-
----
-
-### `object-property-value-brace`
-
-**What it does:** Ensures opening braces of object values start on the same line as the colon, not on a new line.
-
-**Why use it:** Braces on new lines waste vertical space and disconnect the property key from its value.
-
-```javascript
-// ✅ Good — brace on same line as colon
-const styles = {
-    "& a": { color: "red" },
-    "& button": { padding: "10px" },
-};
-
-const config = {
-    server: {
-        host: "localhost",
-        port: 3000,
-    },
-};
-
-// ❌ Bad — brace on new line
-const styles = {
-    "& a":
-        { color: "red" },
-    "& button":
-        { padding: "10px" },
-};
-
-// ❌ Bad — inconsistent
-const config = {
-    server:
-    {
-        host: "localhost",
-    },
-};
-```
-
----
-
-### `object-property-value-format`
-
-**What it does:** Ensures property values start on the same line as the colon for simple values (strings, numbers, identifiers).
-
-**Why use it:** Values on new lines after the colon waste space and look disconnected from their keys.
-
-```javascript
-// ✅ Good — values on same line as colon
-const user = {
-    name: "John",
-    age: 30,
-    isActive: true,
-    role: userRole,
-};
-
-// ✅ Good — complex values can span lines
-const config = {
-    handler: (event) => {
-        process(event);
-    },
-    items: [
-        "first",
-        "second",
-    ],
-};
-
-// ❌ Bad — simple values on new line
-const user = {
-    name:
-        "John",
-    age:
-        30,
-    isActive:
-        true,
-};
-```
-
----
-
-### `string-property-spacing`
-
-**What it does:** Removes leading and trailing whitespace inside string property keys.
-
-**Why use it:** Whitespace in property keys is usually unintentional and can cause bugs when accessing properties.
-
-```javascript
-// ✅ Good — no extra whitespace
-const styles = {
-    "& a": { color: "red" },
-    "& .button": { padding: "10px" },
-    "data-testid": "myElement",
-};
-
-const obj = {
-    "Content-Type": "application/json",
-    "X-Custom-Header": "value",
-};
-
-// ❌ Bad — leading whitespace
-const styles = {
-    " & a": { color: "red" },
-    " & .button": { padding: "10px" },
-};
-
-// ❌ Bad — trailing whitespace
-const obj = {
-    "Content-Type ": "application/json",
-};
-
-// ❌ Bad — both
-const styles = {
-    " & a ": { color: "red" },
-};
-```
-
-<br />
-
----
-
-[← Back to Rules Index](./README.md) | [← Back to Main README](../../README.md)

package/docs/rules/react.md

@@ -1,175 +0,0 @@
-# React Rules
-
-### `react-code-order`
-
-**What it does:** Enforces a consistent ordering of code blocks within React components and custom hooks. The order follows a logical dependency chain where declarations appear before their usage.
-
-**Order (top to bottom):**
-1. Props/params destructure (in function signature: `({ prop1, prop2 })`)
-2. Props/params destructure in body (`const { x } = propValue` where propValue is a prop)
-3. `useRef` declarations
-4. `useState` declarations
-5. `useReducer` declarations
-6. `useSelector` / `useDispatch` (Redux hooks)
-7. Router hooks (`useNavigate`, `useLocation`, `useParams`, `useSearchParams`)
-8. Context hooks (`useContext`, `useToast`, etc.)
-9. Custom hooks (`use*` pattern)
-10. Derived state / variables (computed from hooks above, e.g., `const isSearching = term.length > 0`)
-11. `useMemo` declarations
-12. `useCallback` declarations
-13. Handler functions (`const handleX = () => {}`)
-14. `useEffect` / `useLayoutEffect`
-15. Return statement
-
-**Why use it:** A consistent code structure makes components and hooks predictable and easier to navigate. Placing hooks before derived values ensures dependencies are defined before use. Effects come last because they typically depend on everything else.
-
-```typescript
-// Good — Component follows the correct order
-const UserDashboard = ({ title }) => {
-    // 1. useRef
-    const inputRef = useRef(null);
-
-    // 2. useState
-    const [count, setCount] = useState(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // 3. Redux hooks
-    const dispatch = useDispatch();
-    const user = useSelector((state) => state.user);
-
-    // 4. Router hooks
-    const navigate = useNavigate();
-    const { id } = useParams();
-
-    // 5. Custom hooks
-    const { data, loading } = useFetchData(id);
-
-    // 6. Derived state
-    const isReady = !loading && data !== null;
-    const displayName = user?.name ?? "Guest";
-
-    // 7. useMemo
-    const filteredItems = useMemo(
-        () => data?.filter((item) => item.active),
-        [data],
-    );
-
-    // 8. useCallback
-    const handleSubmit = useCallback(
-        () => {
-            dispatch(submitAction());
-        },
-        [dispatch],
-    );
-
-    // 9. Handler functions
-    const resetHandler = () => {
-        setCount(0);
-        setIsLoading(false);
-    };
-
-    // 10. useEffect
-    useEffect(
-        () => {
-            inputRef.current?.focus();
-        },
-        [],
-    );
-
-    // 11. Return
-    return (
-        <div>
-            <h1>{title}</h1>
-            <span>{displayName}</span>
-        </div>
-    );
-};
-
-// Good — Custom hook follows the correct order
-const useCreateAccount = () => {
-    // 1. useState
-    const [loading, setLoading] = useState(false);
-    const [created, setCreated] = useState(false);
-
-    // 2. Redux hooks
-    const dispatch = useDispatch();
-
-    // 3. Context hooks
-    const { toast } = useToast();
-
-    // 4. Handler functions
-    const createAccountHandler = async (data: AccountData) => {
-        setLoading(true);
-        try {
-            await api.createAccount(data);
-            setCreated(true);
-        } catch (error) {
-            toast({ description: "Failed to create account" });
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    // 5. useEffect
-    useEffect(
-        () => {
-            if (created) {
-                setTimeout(() => setCreated(false), 50);
-            }
-        },
-        [created],
-    );
-
-    // 6. Return
-    return { createAccountHandler, created, loading };
-};
-
-// Bad — useEffect before useState
-const BadComponent = ({ title }) => {
-    useEffect(() => {
-        console.log("mounted");
-    }, []);
-
-    const [count, setCount] = useState(0);
-
-    return <div>{title}</div>;
-};
-
-// Bad — context hook before useState in custom hook
-const useBadHook = () => {
-    const { toast } = useToast();          // Should come after useState
-    const [loading, setLoading] = useState(false);
-    return { loading };
-};
-
-// Bad — handler before hooks
-const AnotherBadComponent = ({ title }) => {
-    const handleClick = () => {
-        console.log("clicked");
-    };
-
-    const dispatch = useDispatch();
-    const [count, setCount] = useState(0);
-
-    return <div onClick={handleClick}>{title}</div>;
-};
-
-// Bad — derived state after handler
-const YetAnotherBad = ({ title }) => {
-    const [items, setItems] = useState([]);
-
-    const handleAdd = () => {
-        setItems([...items, "new"]);
-    };
-
-    const itemCount = items.length; // Should come before handleAdd
-
-    return <div>{itemCount}</div>;
-};
-```
-
-<br />
-
----
-
-[<- Back to Rules Index](./README.md) | [<- Back to Main README](../../README.md)

package/docs/rules/spacing.md

@@ -1,61 +0,0 @@
-# Spacing Rules
-
-### `assignment-value-same-line`
-
-**What it does:** Ensures the assigned value starts on the same line as the `=` sign, not on a new line.
-
-**Why use it:** Breaking after `=` creates awkward formatting and wastes vertical space. Keeping values on the same line as `=` is more readable.
-
-```javascript
-// ✅ Good — value starts on same line as =
-const name = "John";
-const config = {
-    host: "localhost",
-    port: 3000,
-};
-const items = [
-    "first",
-    "second",
-];
-
-// ❌ Bad — value on new line after =
-const name =
-    "John";
-const config =
-    {
-        host: "localhost",
-        port: 3000,
-    };
-const items =
-    [
-        "first",
-        "second",
-    ];
-```
-
----
-
-### `member-expression-bracket-spacing`
-
-**What it does:** Removes spaces inside brackets in computed member expressions (array access, dynamic property access).
-
-**Why use it:** Consistent with JavaScript conventions. Spaces inside brackets look inconsistent with array literals and other bracket usage.
-
-```javascript
-// ✅ Good — no spaces inside brackets
-const value = arr[0];
-const name = obj[key];
-const item = data[index];
-const nested = matrix[row][col];
-
-// ❌ Bad — spaces inside brackets
-const value = arr[ 0 ];
-const name = obj[ key ];
-const item = data[ index ];
-```
-
-<br />
-
----
-
-[← Back to Rules Index](./README.md) | [← Back to Main README](../../README.md)

package/docs/rules/strings.md

@@ -1,92 +0,0 @@
-# String Rules
-
-### `no-hardcoded-strings`
-
-**What it does:** Enforces that user-facing strings should be imported from constants/strings/data 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.
-
-**Special detection (should be imported from `@/enums` or `@/data`):**
-- **HTTP status codes** — 2xx, 4xx, 5xx like "200", "404", "500"
-- **HTTP methods** — "GET", "POST", "PUT", "DELETE", "PATCH", etc.
-- **Role/permission names** — "admin", "user", "moderator", "editor", etc.
-- **Environment names** — "production", "development", "staging", "test", etc.
-- **Log levels** — "debug", "info", "warn", "error", "fatal", etc.
-- **Status strings** — "active", "pending", "approved", "rejected", "completed", etc.
-- **Priority levels** — "high", "medium", "low", "critical", "urgent", etc.
-
-**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";
-import { HttpStatus, UserRole } from "@/enums";
-
-const ComponentHandler = () => (
-    <div>
-        <button>{BUTTON_LABEL}</button>
-        <span>{ERROR_MESSAGE}</span>
-        <p>{welcomeText}</p>
-    </div>
-);
-
-const getMessageHandler = () => ERROR_MESSAGE;
-
-// Good — using enums for status codes and roles
-if (status === HttpStatus.NOT_FOUND) { ... }
-if (role === UserRole.ADMIN) { ... }
-
-// 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";
-
-// Bad — hardcoded status codes and roles
-if (status === "404") { ... }
-if (role === "admin") { ... }
-```
-
-**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 strings:**
-- `@/data`
-- `@/strings` or `@/@strings`
-- `@/constants` or `@/@constants`
-
-**Valid import paths for enums (status codes, roles):**
-- `@/enums`
-- `@/data`
-
----
-
-<br />
-
----
-
-[<- Back to Rules Index](./README.md) | [<- Back to Main README](../../README.md)