eslint-plugin-no-classname-with-stylename

Travis: Appveyor:

While using CSS Modules, disallow using (non-conditional / string) classNames in a JSX tag if it already has a styleName

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-no-classname-with-stylename:

$ npm install eslint-plugin-no-classname-with-stylename --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-no-classname-with-stylename globally.

Usage

Either extend from the plugin or add the rules explicitly.

A. Extend from plugin

{
    "extends": [
        // ... other extends here (like airbnb)
        "plugin:no-classname-with-stylename/recommended"
    ]
}

OR

B. Use rule directly

Add no-classname-with-stylename to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "no-classname-with-stylename"
    ]
}

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

{
    "rules": {
        "no-classname-with-stylename/no-classname-with-stylename": 1,
    }
}

Supported Rules

There is only one rule, for now -

• no-classname-with-stylename - Disallow string className alongwith styleName attribute in the same JSX tag.