Configuration

eslint-plugin-code-style ships with 4 ready-to-use preset configs. Pick the one that matches your stack or manually enable individual rules.

Why Preset Configs?

Each preset enables the correct set of rules for your project type. TypeScript presets include 9 additional TS-only rules. Tailwind presets include 4 className utility rules. This way you avoid enabling rules that do not apply to your stack.

Available Configs

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

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

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

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

Manual Configuration

If you prefer granular control, register the plugin and enable only the rules you need:

import codeStyle from "eslint-plugin-code-style"; export default [    {        plugins: {            "code-style": codeStyle,        },        rules: {            "code-style/array-items-per-line": "warn",            "code-style/arrow-function-simplify": "warn",            "code-style/jsx-simple-element-one-line": "warn",            // ...add only the rules you need        },    },];

Configuring Rule Options

20 of the 81 rules accept configuration options. Override a preset by adding a second config object with your custom settings:

import codeStyle from "eslint-plugin-code-style"; export default [    codeStyle.configs.react,    {        rules: {            "code-style/array-items-per-line": ["warn", { maxItems: 5 }],            "code-style/hook-deps-per-line": ["warn", { maxDeps: 4 }],            "code-style/object-property-per-line": ["warn", { minProperties: 3 }],        },    },];

Each configurable rule documents its options on its own rule page.

TypeScript-Only Rules

The following 9 rules require a TypeScript parser and are only included in the react-ts and react-ts-tw configs:

• enum-format
• enum-type-enforcement
• interface-format
• no-inline-type-definitions
• prop-naming-convention
• type-annotation-spacing
• type-format
• component-props-inline-type
• typescript-definition-location

If you use a manual config in a TypeScript project, make sure you have @typescript-eslint/parser configured and include these rules explicitly.

ESLint v9 vs v10

Both ESLint v9 and v10 are fully supported. The plugin ships with dedicated recommended configs for each version. The key difference is which React-related plugins are used under the hood:

All other plugins (stylistic, typescript-eslint, import-x, perfectionist, code-style, tailwindcss, etc.) work identically with both ESLint v9 and v10.

Browse the ready-to-use config files for each version on GitHub: v9 configs | v10 configs

Next Steps

• Rules Reference — Browse all 81 rules with examples and options
• Philosophy — Learn the design principles behind the plugin
• Contributing — Help improve and extend the rules