noDuplicateClasses (JavaScript)

Summary

Rule available since: v2.4.0
Diagnostic Category: assist/source/noDuplicateClasses
Sources:
- Inspired from better-tailwindcss/no-duplicate-classes

How to enable in your editor

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.action.noDuplicateClasses.biome": "explicit",
4
    "source.fixAll.biome": "explicit"
5
  }
6
}

1
{
2
  "code_actions_on_format": {
3
    "source.action.noDuplicateClasses.biome": true,
4
    "source.fixAll.biome": true
5
  }
6
}

Use the source action code source.action.noDuplicateClasses.biome

How to configure

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "noDuplicateClasses": "on"
6
      }
7
    }
8
  }
9
}

Description

Remove repeated CSS class names.

The action checks JSX class and className attributes by default. It can also check additional attributes, function calls, and tagged templates configured by name. A tagged template is a template literal with a function name immediately before its opening backtick. Duplicate class names are redundant and often indicate a copy-and-paste mistake or merge conflict.

Examples

1
<div class="flex flex" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·class="flex·flex"·/>;
      │                 -----

1
<div class="p-4 text-red-500 p-4 bg-white" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·class="p-4·text-red-500·p-4·bg-white"·/>;
      │                              ----

Options

`attributes`

Adds JSX attributes to check alongside class and className. Defaults to an empty list.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "noDuplicateClasses": {
6
          "level": "on",
7
          "options": {
8
            "attributes": [
9
              "tw"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

1
<div tw="flex flex" />

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·tw="flex·flex"·/>
      │              -----

`functions`

Lists utility functions or tagged templates whose strings contain CSS classes. Defaults to an empty list.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "noDuplicateClasses": {
6
          "level": "on",
7
          "options": {
8
            "functions": [
9
              "clsx"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

1
const className = clsx("p-4 p-4");

code-block.js ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ const·className·=·clsx("p-4·p-4");
      │                            ----