// eslint-plugin-code-stylev3.1.1

Code Style Rulesfor React Projects

yet another linter↳ code style, opinionated

81 custom ESLint rules for enforcing consistent code formatting in React and JSX projects. 71 auto-fixable, 20 configurable, zero dependencies.

81 rules · 71 auto-fix · zero deps

View All Rules Get Started GitHub

auto-fixed!

user-card.tsx

4 problems found

hover the editor to pause →

author's note

Most linters hand you a thousand options and ask you to decide. This one picks for you — opinionated defaults, auto-fixed where possible. It enforces the decisions Prettier deliberately leaves to you: prop order, absolute imports, extracted strings, component structure. If you disagree, configure it. If you don't, you're already done.

It enforces the decisions Prettier deliberately leaves to you.

— why this plugin exists

where Prettier stops.

The things Prettier won't do.

Prettier reformats what's formattable. This plugin enforces what's opinionated. The two are complementary — run them both.

Prettier only

javascript

<Button onClick={onSave} disabled={isLoading} type="submit">    Save</Button>

with this plugin

javascript

<Button disabled={isLoading} type="submit" onClick={onSave}>    Save</Button>

JSX props — alphabetical, callbacks last · react/jsx-sort-props

Prettier only

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

Prettier only

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 left by existing ESLint and Prettier plugins.

const x = 1

eslint --fix

Auto-Fixable Rules

71 of 81 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","prettier"] }

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;

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 81 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