Getting Started

Install eslint-plugin-code-style and add it to your ESLint flat config. You will be up and running in under a minute.

Requirements

DependencyVersion
ESLint>= 9.0.0 (v9 and v10 supported)
Node.js>= 20.0.0

Installation

Install the plugin as a dev dependency using your preferred package manager:

npm
bash
npm install -D eslint-plugin-code-style
pnpm
bash
pnpm add -D eslint-plugin-code-style
yarn
bash
yarn add -D eslint-plugin-code-style

Basic Configuration

Add the plugin to your eslint.config.js using one of the built-in preset configs. This example enables all 72 JavaScript/React rules:

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

See the Configuration guide for all four preset configs including TypeScript and Tailwind variants.

Run ESLint with Auto-Fix

71 of the 81 rules are auto-fixable. Run ESLint with the --fix flag to automatically format your code:

terminal
bash
npx eslint . --fix

Enable All Rules Manually

If you prefer full control, you can manually enable each of the 81 rules instead of using a preset config:

eslint.config.js
js
1import codeStyle from "eslint-plugin-code-style";2 3export default [4    {5        plugins: {6            "code-style": codeStyle,7        },8        rules: {9            "code-style/array-callback-destructure": "warn",10            "code-style/array-items-per-line": "warn",11            "code-style/array-objects-on-new-lines": "warn",12            "code-style/arrow-function-block-body": "warn",13            "code-style/arrow-function-simple-jsx": "warn",14            "code-style/arrow-function-simplify": "warn",15            "code-style/curried-arrow-same-line": "warn",16            "code-style/function-arguments-format": "warn",17            "code-style/nested-call-closing-brackets": "warn",18            "code-style/no-empty-lines-in-function-calls": "warn",19            "code-style/opening-brackets-same-line": "warn",20            "code-style/simple-call-single-line": "warn",21            "code-style/single-argument-on-one-line": "warn",22            "code-style/comment-format": "warn",23            "code-style/component-props-destructure": "warn",24            "code-style/component-props-inline-type": "warn",25            "code-style/folder-based-naming-convention": "warn",26            "code-style/folder-structure-consistency": "warn",27            "code-style/no-redundant-folder-suffix": "warn",28            "code-style/svg-icon-naming-convention": "warn",29            "code-style/class-method-definition-format": "warn",30            "code-style/class-naming-convention": "warn",31            "code-style/block-statement-newlines": "warn",32            "code-style/empty-line-after-block": "warn",33            "code-style/if-else-spacing": "warn",34            "code-style/if-statement-format": "warn",35            "code-style/logical-expression-multiline": "warn",36            "code-style/multiline-if-conditions": "warn",37            "code-style/no-empty-lines-in-switch-cases": "warn",38            "code-style/ternary-condition-multiline": "warn",39            "code-style/function-call-spacing": "warn",40            "code-style/function-declaration-style": "warn",41            "code-style/function-naming-convention": "warn",42            "code-style/function-object-destructure": "warn",43            "code-style/function-params-per-line": "warn",44            "code-style/no-empty-lines-in-function-params": "warn",45            "code-style/hook-callback-format": "warn",46            "code-style/hook-deps-per-line": "warn",47            "code-style/hook-file-naming-convention": "warn",48            "code-style/hook-function-naming-convention": "warn",49            "code-style/use-state-naming-convention": "warn",50            "code-style/absolute-imports-only": "warn",51            "code-style/export-format": "warn",52            "code-style/import-format": "warn",53            "code-style/import-source-spacing": "warn",54            "code-style/index-export-style": "warn",55            "code-style/index-exports-only": "warn",56            "code-style/inline-export-declaration": "warn",57            "code-style/module-index-exports": "warn",58            "code-style/classname-dynamic-at-end": "warn",59            "code-style/classname-multiline": "warn",60            "code-style/classname-no-extra-spaces": "warn",61            "code-style/classname-order": "warn",62            "code-style/jsx-children-on-new-line": "warn",63            "code-style/jsx-closing-bracket-spacing": "warn",64            "code-style/jsx-element-child-new-line": "warn",65            "code-style/jsx-logical-expression-simplify": "warn",66            "code-style/jsx-parentheses-position": "warn",67            "code-style/jsx-prop-naming-convention": "warn",68            "code-style/jsx-simple-element-one-line": "warn",69            "code-style/jsx-string-value-trim": "warn",70            "code-style/jsx-ternary-format": "warn",71            "code-style/no-empty-lines-in-jsx": "warn",72            "code-style/no-empty-lines-in-objects": "warn",73            "code-style/object-property-per-line": "warn",74            "code-style/object-property-value-brace": "warn",75            "code-style/object-property-value-format": "warn",76            "code-style/string-property-spacing": "warn",77            "code-style/assignment-value-same-line": "warn",78            "code-style/member-expression-bracket-spacing": "warn",79            "code-style/react-code-order": "warn",80            "code-style/no-hardcoded-strings": "warn",81            "code-style/enum-format": "warn",82            "code-style/enum-type-enforcement": "warn",83            "code-style/interface-format": "warn",84            "code-style/no-inline-type-definitions": "warn",85            "code-style/prop-naming-convention": "warn",86            "code-style/type-annotation-spacing": "warn",87            "code-style/type-format": "warn",88            "code-style/typescript-definition-location": "warn",89            "code-style/variable-naming-convention": "warn",90        },91    },92];

Note: The last 9 rules in the list (fromenum-format to variable-naming-convention minus the last one) are TypeScript-only. They require@typescript-eslint/parser and will not work in plain JavaScript projects.

Disabling Rules

To disable specific rules from a preset config, add a second config object that sets them to "off":

eslint.config.js
js
import codeStyle from "eslint-plugin-code-style"; export default [    codeStyle.configs.react,    {        rules: {            "code-style/array-items-per-line": "off",            "code-style/comment-format": "off",        },    },];

Next Steps