// eslint-plugin-code-stylev3.4.2

Code Style Rulesfor React Projects

yet another linter↳ code style, opinionated

83 custom ESLint rules for enforcing consistent code formatting in React and JSX projects. 72 auto-fixable, 24 configurable, zero dependencies.

83 rules · 72 auto-fix · zero deps

View All Rules Get Started GitHub

auto-fixed!

card.tsx

6 problems found

hover the editor to pause →

author's note

For years we enforced these style rules by hand in code review — which made them easy to miss and impossible to apply consistently. So I packaged the ones ESLint's built-ins never covered into a single, dependency-free rules file: prop order, absolute imports, extracted strings, component structure. Drop it into any ES project, import it, and run eslint --fix like native rules. Across our projects it cut code-style differences between engineers by about 95% — most of all for the frontend team, where the gaps hurt longest.

ESLint catches what's broken. This plugin settles what's subjective — prop order, imports, where strings live — and auto-fixes it.

— why this plugin exists

the layer above ESLint

The rules ESLint never shipped.

When ESLint deprecated its formatting rules, ESLint Stylistic picked them up — spacing, quotes, semicolons. But the opinionated structural calls were never covered by either: prop order, import paths, where strings live. We used to enforce those by hand in review, where they were easy to miss. This plugin turns them into auto-fixed rules on top of ESLint.

Plain ESLint

javascript

<div className="flex items-center gap-3 p-4">{label}</div>

With this plugin

javascript

<div    className="        flex        items-center        gap-3        p-4    ">    {label}</div>

className — one class per line when over 3 · code-style/classname-multiline

Plain ESLint

import { Button } from "../../components/button";import { useTheme } from "../../hooks/use-theme";

With this plugin

import { Button } from "@/components";import { useTheme } from "@/hooks";

Imports — absolute via @/ alias · code-style/absolute-imports-only

Plain ESLint

javascript

<p className="text-sm">Welcome to the dashboard</p>

With this plugin

javascript

<p className="text-sm">{uiStringsData.welcome}</p>

Strings — extracted into data files · code-style/no-hardcoded-strings

Read the full philosophy

the gestures

Six things it does.

Built to fill the gaps ESLint's built-in rules leave behind.

const x=1

const x = 1 ✓

eslint --fix

Auto-Fixable Rules

72 of 83 rules come with auto-fix support. Run eslint --fix and watch your code snap into shape.

React & JSX First

Purpose-built for React projects. JSX formatting, component conventions, hook patterns, and prop naming.

.eslintrc{ extends: ["airbnb","plugin:react/recommended"] }

eslint.config.jsexport default [codeStyle.configs.react,]

ESLint v9+ Flat Config

Designed for the modern flat config system. No legacy .eslintrc files needed.

Zero Dependencies

No external runtime dependencies. Lightweight and fast, with no supply-chain concerns.

interface User {

name: string;id: string;active: string;

active: string;id: string;name: string;

}

TypeScript Support

9 TypeScript-specific rules for enums, interfaces, type annotations, and prop naming.

react

react-ts

react-tw

react-ts-tw

Ready-to-Use Configs

4 preset configs for React, React+TypeScript, React+Tailwind, and React+TypeScript+Tailwind.

the index

The complete index.

All 83 rules, grouped into 17 categories. Every category page lists rules with examples, rationale, and options.

Quick Start

Get up and running in under a minute.

this works in seconds ✦

Install

terminal

bash

npm install -D eslint-plugin-code-style

Configure

eslint.config.js

import codeStyle from "eslint-plugin-code-style"; export default [    codeStyle.configs.react,];

Using TypeScript? Use react-ts instead:

eslint.config.js

import codeStyle from "eslint-plugin-code-style"; export default [    codeStyle.configs["react-ts"],];

Lint

terminal

bash

npx eslint . --fix

Full Installation Guide