← Back to rules

unicorn/prefer-classlist-toggle Style

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

它的作用

优先使用 element.classList.toggle(className, condition)，而不是 条件式的添加/移除模式。

这为什么不好？

与使用条件逻辑在 add() 和 remove() 之间切换相比，toggle() 方法更简洁，也更具表达力。

示例

以下是此规则的错误代码示例：

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");

以下是此规则的正确代码示例：

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

如何使用

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

版本

此规则已在 v1.20.0 中添加。

参考资料

• Rule Source
• Open rule in Oxc Playground