eslint-plugin-clsx

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