juanpinheiro / eslint-plugin-deprecate-classnames

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.

Rule classnames

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"}
        ]
    }
}

Rule classes

<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"}
        ]
    }
}