Skip to content

temoncher/eslint-plugin-clsx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

213abd7 Β· Sep 20, 2024

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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