eslint-plugin-deprecate-classnames
This plugin helps you to refactor your codebase. This is an extension of eslint-plugin-deprecate.
Installation
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-deprecate-classnames
:
$ npm install eslint-plugin-deprecate-classnames --save-dev
Usage
Add deprecate
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": [
"deprecate-classnames"
]
}
Then configure the rules you want to use under the rules section.
classnames
Rule to identify the use of deprecated classnames in JSX/TSX files:
<div className="test-classname test-classname-2" />
use the following configuration:
// Specific classnames
{
"rules": {
"deprecate-classnames/classnames": ["error",
{"name": "test-classname", "use": "new-classname"}
]
}
}
// Multiple classnames
{
"rules": {
"deprecate-classnames/classnames": ["error",
{"names": ["test-classname", "test-classname-2"], "use": "new-classname"}
]
}
}
// RegExp
{
"rules": {
"deprecate-classnames/classnames": ["error",
{"nameRegExp": "test-", "use": "new-classnames"}
]
}
}
classes
Rule <div classes={{ root: "test-classname test-classname-2" }} />
use the following configuration:
// Specific classnames
{
"rules": {
"deprecate-classnames/classes": ["error",
{"name": "test-classname", "use": "new-classname"}
]
}
}
// Multiple classnames
{
"rules": {
"deprecate-classnames/classes": ["error",
{"names": ["test-classname", "test-classname-2"], "use": "new-classname"}
]
}
}
// RegExp
{
"rules": {
"deprecate-classnames/classes": ["error",
{"names": ["test-classname", "test-classname-2"], "use": "new-classname"}
]
}
}
{
"rules": {
"deprecate-classnames/classes": ["error",
{"nameRegExp": "test-", "use": "new-classnames"}
]
}
}