unicorn/prefer-classlist-toggle Style

🛠️ An auto-fix is available for this rule.

What it does

Prefers the use of element.classList.toggle(className, condition) over conditional add/remove patterns.

Why is this bad?

The toggle() method is more concise and expressive than using conditional logic to switch between add() and remove().

Examples

Examples of incorrect code for this rule:

if (condition) {
  element.classList.add("className");
} else {
  element.classList.remove("className");
}

condition ? element.classList.add("className") : element.classList.remove("className");

element.classList[condition ? "add" : "remove"]("className");

Examples of correct code for this rule:

element.classList.toggle("className", condition);

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny unicorn/prefer-classlist-toggle

Config (.oxlintrc.json)

{
  "rules": {
    "unicorn/prefer-classlist-toggle": "error"
  }
}

References

• Rule Source