eslint-plugin-classnames

Warn and formats long classNames usage in JSX

Installation

You'll first need to install ESLint:

``
$ npm i eslint --save-dev
`

Next, install eslint-plugin-classnames:

`
$ npm install eslint-plugin-classnames --save-dev
`

Usage

Add classnames to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

`json
{
"plugins": ["classnames"]
}
`

Then configure the rules you want to use under the rules section.

`json
{
"rules": {
"classnames/prefer-classnames-function": 2
}
}
`

Supported Rules

✔: Enabled in the recommended configuration.\
🔧: Fixable with eslint --fix`.

| ✔ | 🔧 | Rule | Description |
| :-: | :-: | :-------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ |
| ✔ | 🔧 | classnames/prefer-classnames-function | suggest using className() or clsx() in JSX className |
| ✔ | 🔧 | classnames/one-by-one-arguments | suggest not to include multiple classes in an argument of className() or clsx() |