Philosophy

eslint-plugin-code-style exists because consistent code formatting goes beyond what Prettier and existing ESLint plugins cover. Here are the principles that guide every rule in the plugin.

Filling the Gaps

Prettier handles basic formatting: indentation, semicolons, trailing commas, line width. But it deliberately avoids opinions on many structural patterns. Existing ESLint plugins focus on catching bugs and enforcing best practices, not formatting style.

block across and and are array arrow between bodies, break children consistency covers: dozens enforces fills formatted, functions gap how how It items JSX lines, linters. logic-focused more. no other plugin Prettier should structural that the This tool use when

Self-Sufficient Rules

Every rule is self-contained. No rule depends on another rule to work correctly. You can enable any single rule in isolation and get the expected behavior without surprises.

This also means rules do not conflict with each other. Enabling the entire plugin produces a consistent output with no contradictory fixes.

Auto-Fix First

71 of 81 rules are auto-fixable. The goal is to let developers write code naturally and then run eslint --fix to apply formatting automatically. This reduces the cognitive overhead of remembering style rules and eliminates back-and-forth in code reviews over formatting issues.

The remaining 10 rules are report-only because their fixes would be ambiguous or could change runtime behavior. In those cases, the rule reports the issue and lets the developer decide how to resolve it.

Consistency at Scale

block 10, 5, 50 a a across another another array arrow bodies. breaks codebase, compound developer developers functions, implicit in inconsistencies items line, lines. of on on One One or puts quickly. returns same single small team the them uses uses When works

These rules enforce a single way to format each pattern. The result is a codebase that reads as if one person wrote it, regardless of team size.

Opinionated but Configurable

The plugin ships with sensible defaults that work well for most projects. But 20 of the 81 rules accept configuration options for cases where the defaults do not fit. For example:

  • array-items-per-line defaults to collapsing arrays with 3 or fewer items, but you can adjust the threshold.
  • hook-deps-per-line defaults to expanding dependency arrays with more than 3 dependencies, but you can set a different limit.
  • use-state-naming-convention allows you to extend the list of valid boolean prefixes beyond the defaults.

Defaults are chosen to match what the majority of React codebases already do. Configuration options exist for the minority that need something different.

Naming Conventions

Several rules enforce naming conventions for variables, functions, hooks, components, and files. These rules exist because consistent naming is one of the highest-leverage ways to improve codebase readability.

When you see a function named useAuth, you immediately know it is a React hook. When you see a file named use-auth.ts, you know it contains a hook. When a boolean prop starts with is or has, you know its type without checking. These conventions eliminate guesswork.

React First

This plugin is purpose-built for React and JSX projects. Many rules target patterns that only exist in React codebases: component prop destructuring, hook dependency arrays, JSX ternary formatting, className ordering, and more.

General-purpose JavaScript rules (arrays, objects, functions, control flow) are included because they affect how React code reads and are not covered by other tools.

Works Alongside Existing Tools

The plugin is designed to work alongside Prettier, eslint-plugin-react, @typescript-eslint, and any other ESLint plugins you use. It does not duplicate their rules or conflict with their fixes.

Run Prettier for base formatting, this plugin for structural formatting, and your existing plugins for logic and best practices. They complement each other.

Next Steps