Warn and formats long classNames usage in JSX
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-classnames
:
$ npm install eslint-plugin-classnames --save-dev
Add classnames
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": ["classnames"]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"classnames/prefer-classnames-function": 2
}
}
โ: 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() |