eslint-plugin-clsx

An ESLint plugin for clsx/classnames

* Installation
* Usage
* Rules
* Presets
* Preset usage

Installation

You'll first need to install ESLint:

``sh
npm i eslint --save-dev
`

Next, install eslint-plugin-clsx:

`sh
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

`json
{
"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 |

$3

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

`js
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)

`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

`js
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)

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

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

`js
import mc from 'myclsx';

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

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

`js
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):

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