noDuplicateClasses (HTML)

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 from HTML class attributes.

Duplicate class names do not change the rendered style and often indicate a copy-and-paste mistake or merge conflict. The action keeps the first occurrence and removes later repeats.

Examples

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

code-block.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

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

code-block.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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