An ESLint plugin for clsx/classnames

• Installation
• Usage
• Rules
• Presets
  • Preset usage

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-clsx:

npm install eslint-plugin-clsx --save-dev

Here's an example ESLint configuration that:

• Enables the recommended configuration
• Enables an optional/non-recommended rule

{
    "extends": ["plugin:clsx/recommended"],
    "rules": {
        "clsx/no-redundant-clsx": "error"
    }
}

⚠️ Configurations set to warn in.
✅ Set in the recommended configuration.
🔧 Automatically fixable by the --fix CLI option.

Presets are enabled by adding a line to the extends list in your config file. For example, to enable the recommended preset, use:

{
    "extends": ["plugin:clsx/recommended"]
}

This rule can optionally be configured with an object that represents imports that should be considered an clsx usage

{
    "settings": {
        "clsxOptions": {
            "myclsx": "default"
        }
    }
}

Examples of incorrect code for the { myclsx: 'default' } setting (with no-redundant-clsx rule enabled):

import mc from 'myclsx';

const singleClasses = mc('single-class');

Examples of incorrect code for the { myclsx: 'cn' } setting (with no-redundant-clsx rule enabled):

import { cn } from 'myclsx';

const singleClasses = cn('single-class');

Examples of incorrect code for the { myclsx: ['default', 'cn'] } setting (with no-redundant-clsx rule enabled):

import mc, { cn } from 'myclsx';

// both report errors
const singleClasses = cn('single-class');
const singleClasses = mc('single-class');

Default setting value is { clsx: ['default', 'clsx'], classnames: 'default' }