eslint-plugin-clsx

An ESLint plugin for clsx/classnames

• Installation
• Usage
• Rules
• Presets
  • Preset usage

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-clsx:

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

Usage

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

Rules

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

| Name                                   | Description | ⚠️ | 🔧 | | :--------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :- | :- | | forbid-array-expressions | forbid usage of array expressions inside clsx | ✅ | 🔧 | | forbid-false-inside-object-expressions | forbid usage of false literal inside object expressions of clsx | ✅ | 🔧 | | forbid-true-inside-object-expressions | forbid usage of true literal inside object expressions of clsx | ✅ | 🔧 | | no-redundant-clsx | disallow redundant clsx usage | ✅ | 🔧 | | no-spreading | forbid usage of object expression inside clsx | ✅ | 🔧 | | prefer-logical-over-objects | forbid usage of object expression inside clsx | | 🔧 | | prefer-merged-neighboring-elements | enforce merging of neighboring elements | ✅ | 🔧 | | prefer-objects-over-logical | forbid usage of logical expressions inside clsx | | 🔧 |

Presets

| | Name | Description | |:--|:-----|:------------| | ✅ | recommended | enables all recommended rules in this plugin | | | all | enables all rules in this plugin |

Preset usage

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

import { defineConfig } from "eslint/config";
import clsx from "eslint-plugin-clsx";

export default defineConfig(
  /* Main config */
  clsx.configs.flat.recommended,
);

or in legacy config (.eslintrc.json)

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

Settings

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

import { defineConfig } from "eslint/config";
import clsx from "eslint-plugin-clsx";

export default defineConfig(
  {
    plugins: { clsx },
    settings: {
      clsxOptions: {
        myclsx: ["default", "clsx"],
      },
    },
    rules: {
      'clsx/no-redundant-clsx': 'error',
    }
  }
);

or in legacy config (.eslintrc.json)

{
    "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' }