eslint-plugin-code-style 1.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mohamed Elhawary
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,323 @@
+# ESLint Plugin Code Style
+
+A custom ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects.
+
+## Installation
+
+```bash
+npm install eslint-plugin-code-style --save-dev
+# or
+pnpm add eslint-plugin-code-style -D
+# or
+yarn add eslint-plugin-code-style -D
+```
+
+## Configuration
+
+### ESLint Flat Config (eslint.config.js)
+
+```javascript
+import codeStyle from "eslint-plugin-code-style";
+
+export default [
+    {
+        plugins: {
+            "code-style": codeStyle,
+        },
+        rules: {
+            "code-style/rule-name": "error",
+            // ... other rules
+        },
+    },
+];
+```
+
+### Enable All Rules
+
+```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/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/import-format": "error",
+    "code-style/import-source-spacing": "error",
+    "code-style/jsx-children-on-new-line": "error",
+    "code-style/jsx-closing-bracket-spacing": "error",
+    "code-style/jsx-element-child-new-line": "error",
+    "code-style/jsx-logical-expression-simplify": "error",
+    "code-style/jsx-parentheses-position": "error",
+    "code-style/jsx-prop-naming-convention": "error",
+    "code-style/jsx-simple-element-one-line": "error",
+    "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",
+    "code-style/no-empty-lines-in-function-params": "error",
+    "code-style/no-empty-lines-in-jsx": "error",
+    "code-style/no-empty-lines-in-objects": "error",
+    "code-style/no-empty-lines-in-switch-cases": "error",
+    "code-style/object-property-per-line": "error",
+    "code-style/object-property-value-brace": "error",
+    "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/string-property-spacing": "error",
+    "code-style/variable-naming-convention": "error",
+}
+```
+
+## Rules Reference
+
+All rules in this plugin are **auto-fixable** using `eslint --fix`.
+
+### Import/Export Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `absolute-imports-only` | Enforce absolute imports using `@/` alias instead of relative paths | `import { foo } from "@/utils"` not `"../../utils"` |
+| `import-format` | Format imports: `import {` on same line, `} from` on same line, collapse 1-3 specifiers to single line | See examples below |
+| `import-source-spacing` | Enforce no extra spaces inside import path quotes | `from "@/utils"` not `from " @/utils "` |
+| `export-format` | Format exports: `export {` on same line, collapse 1-3 specifiers, multiline for 4+ | Similar to import-format |
+| `module-index-exports` | Enforce proper exports in index files | `export { Foo } from "./foo"` |
+
+### Function Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `arrow-function-block-body` | Enforce parentheses for arrow functions with multiline expressions (preserves implicit return) | `() => (\n    <Component />\n)` |
+| `arrow-function-simplify` | Simplify arrow functions returning simple JSX to single line | `() => <Simple />` |
+| `arrow-function-simple-jsx` | Simplify arrow functions in JSX props with single statement block body | `onClick={() => doSomething()}` |
+| `function-call-spacing` | Enforce no space between function name and opening parenthesis | `fn()` not `fn ()` |
+| `function-naming-convention` | Enforce function naming conventions (camelCase) | `const myFunction = () => {}` |
+| `function-params-per-line` | Enforce function parameters on separate lines when more than 2 | See examples below |
+| `curried-arrow-same-line` | Enforce curried arrow function to start on same line as `=>` | `=> () =>` not `=>\n() =>` |
+
+### Object Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `object-property-per-line` | Enforce each property on its own line when object has 2+ properties | `{\n    a: 1,\n    b: 2,\n}` |
+| `object-property-value-format` | Enforce property value on same line as colon with proper spacing | `key: value` |
+| `object-property-value-brace` | Enforce opening brace on same line as colon for object property values | `key: {` not `key:\n{` |
+| `no-empty-lines-in-objects` | Disallow empty lines inside objects | No blank lines between properties |
+| `string-property-spacing` | Enforce no extra spaces inside string property keys | `["key"]` not `[ "key" ]` |
+
+### Array Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `array-items-per-line` | Enforce array formatting: 3 or less items on one line, more than 3 each on new line | `[1, 2, 3]` or multiline for 4+ |
+| `array-objects-on-new-lines` | Enforce array of objects to have each object on a new line | `[\n    { a: 1 },\n    { b: 2 },\n]` |
+
+### JSX Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `jsx-children-on-new-line` | Enforce JSX children on separate lines from parent tags | `<Parent>\n    child\n</Parent>` |
+| `jsx-closing-bracket-spacing` | No space before `>` or `/>` in JSX tags | `<Component />` not `<Component / >` |
+| `jsx-element-child-new-line` | JSX children that are JSX elements must be on new lines | Each child element on its own line |
+| `jsx-logical-expression-simplify` | Simplify logical expressions in JSX when right side is single-line | `{condition && <Simple />}` |
+| `jsx-parentheses-position` | Enforce opening parenthesis position for JSX in arrow functions | `=> (\n    <JSX />` |
+| `jsx-prop-naming-convention` | Enforce JSX prop naming conventions | camelCase for props |
+| `jsx-simple-element-one-line` | Simple JSX elements with only text/expression children should be on one line | `<Text>Hello</Text>` |
+| `jsx-string-value-trim` | Disallow leading/trailing whitespace in JSX string values | `<Text>Hello</Text>` not `<Text> Hello </Text>` |
+| `jsx-ternary-format` | Enforce consistent formatting for JSX ternary expressions | See examples below |
+| `no-empty-lines-in-jsx` | Disallow empty lines inside JSX elements | No blank lines between JSX children |
+
+### Call Expression Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `simple-call-single-line` | Simplify simple function calls with arrow function to single line | `fn(() => value)` |
+| `single-argument-on-line` | Enforce single simple argument calls to be on one line | `fn(arg)` not `fn(\n    arg\n)` |
+| `multiple-arguments-per-line` | Enforce multiple arguments to each be on their own line | `fn(\n    arg1,\n    arg2,\n)` |
+| `multiline-argument-newline` | Enforce newlines for function calls with multiline arguments | Proper formatting for complex calls |
+| `nested-call-closing-brackets` | Enforce nested function call closing brackets on same line | `}));` not `}\n)\n);` |
+| `no-empty-lines-in-function-calls` | Disallow empty lines in function calls | No blank lines between arguments |
+| `opening-brackets-same-line` | Enforce opening brackets on same line for function calls | `fn({` not `fn(\n{` |
+
+### React Hooks Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `hook-callback-format` | Enforce consistent formatting for React hooks (useEffect, useCallback, etc.) | See examples below |
+| `hook-deps-per-line` | Enforce each hook dependency on its own line when more than 2 dependencies | `[\n    dep1,\n    dep2,\n    dep3,\n]` |
+
+### Control Flow Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `if-statement-format` | Ensure if statement has proper formatting | `if (...) {` |
+| `multiline-if-conditions` | Enforce multiline if conditions when there are more than 3 operands | See examples below |
+| `no-empty-lines-in-switch-cases` | Prevent empty lines at the beginning of switch case logic or between cases | Clean switch statements |
+
+### Spacing & Formatting Rules
+
+| Rule | Description | Example |
+|------|-------------|---------|
+| `assignment-value-same-line` | Enforce assignment value on same line as equals sign | `const x = value` not `const x =\nvalue` |
+| `block-statement-newlines` | Enforce newlines after opening brace and before closing brace in blocks | `{\n    code\n}` |
+| `comment-spacing` | Enforce comment spacing and formatting | Proper spacing around comments |
+| `member-expression-bracket-spacing` | Enforce no spaces inside brackets for member expressions | `obj[key]` not `obj[ key ]` |
+| `no-empty-lines-in-function-params` | Disallow empty lines in function parameters | No blank lines between params |
+| `variable-naming-convention` | Enforce variable naming conventions | camelCase for variables |
+
+## Examples
+
+### import-format
+
+```javascript
+// Good - 3 or fewer specifiers on one line
+import { Box, Button, Grid } from "@mui/material";
+
+// Good - 4+ specifiers on multiple lines
+import {
+    Box,
+    Button,
+    Grid,
+    Typography,
+} from "@mui/material";
+
+// Bad
+import {
+    Box, Button, Grid } from "@mui/material";
+```
+
+### function-params-per-line
+
+```javascript
+// Good - 2 or fewer params on one line
+const fn = (a, b) => {};
+
+// Good - 3+ params on separate lines
+const fn = (
+    param1,
+    param2,
+    param3,
+) => {};
+
+// Bad
+const fn = (param1, param2, param3) => {};
+```
+
+### jsx-ternary-format
+
+```javascript
+// Good - Simple ternary on one line
+{condition ? <Simple /> : <Other />}
+
+// Good - Complex ternary with proper formatting
+{condition ? (
+    <Complex>
+        <Children />
+    </Complex>
+) : (
+    <Alternative>
+        <Content />
+    </Alternative>
+)}
+
+// Bad - Empty lines inside ternary
+{condition ? (
+
+    <Button />
+
+) : (
+
+    <Link />
+
+)}
+```
+
+### hook-callback-format
+
+```javascript
+// Good
+useEffect(
+    () => {
+        doSomething();
+    },
+    [dependency],
+);
+
+// Good - Simple callback
+useEffect(() => doSomething(), []);
+
+// Bad
+useEffect(() => {
+    doSomething();
+}, [dependency]);
+```
+
+### multiline-if-conditions
+
+```javascript
+// Good - 3 or fewer operands on one line
+if (a && b && c) {}
+
+// Good - 4+ operands on multiple lines
+if (
+    condition1
+    && condition2
+    && condition3
+    && condition4
+) {}
+
+// Bad
+if (condition1 && condition2 && condition3 && condition4) {}
+```
+
+## Auto-fixing
+
+All rules support auto-fixing. Run ESLint with the `--fix` flag:
+
+```bash
+# Fix all files
+pnpm eslint src/ --fix
+
+# Fix specific file
+pnpm eslint src/components/MyComponent.jsx --fix
+```
+
+## Disabling Rules
+
+To disable a rule for a specific line:
+
+```javascript
+// eslint-disable-next-line code-style/rule-name
+const code = "violates rule";
+```
+
+To disable a rule for an entire file, add at the top:
+
+```javascript
+/* eslint-disable code-style/rule-name */
+```
+
+To disable in eslint.config.js:
+
+```javascript
+rules: {
+    "code-style/rule-name": "off",
+}
+```