← Back to rules

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 using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

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

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  rules: {
    "unicorn/prefer-classlist-toggle": "error",
  },
});

CLI

oxlint --deny unicorn/prefer-classlist-toggle

Version

This rule was added in v1.20.0.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground