Skip to content

temoncher/eslint-plugin-clsx

Repository files navigation

eslint-plugin-clsx

An ESLint plugin for clsx/classnames

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:

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

Settings

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