← Back to rules

unicorn/prefer-classlist-toggle 风格

An auto-fix is available for this rule.

它的作用

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

为什么这是不好的？

toggle() 方法比使用条件逻辑在 add() 和 remove() 之间切换更加简洁且表达力更强。

示例

此规则的 错误 代码示例：

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

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置 (.oxlintrc.json)

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

CLI

oxlint --deny unicorn/prefer-classlist-toggle

参考资料

• 规则源码