Skip to content

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

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

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