unicorn/prefer-classlist-toggle
Require classList.toggle() instead of choosing between add() and remove()
fixable
classList.toggle(name, force) adds the class if force is true and removes it if force is false. That's one call instead of an if and an else that repeat the element and the class name.
--fix rewrites the code to toggle().
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"unicorn/prefer-classlist-toggle" = "error" # or "warn"Examples#
example.js3 problems
if (isOpen) {Prefer classList.toggle() over classList.add() and classList.remove()
menu.classList.add("open");
} else {
menu.classList.remove("open");
}
isOpen ? menu.classList.add("open") : menu.classList.remove("open")Prefer classList.toggle() over classList.add() and classList.remove();
menu.classList[isOpen ? "add" : "remove"]("open")Prefer classList.toggle() over classList.add() and classList.remove();example.jsNo problems
menu.classList.toggle("open", isOpen);toggle(name, undefined) flips the class instead of removing it. If the condition can be undefined, pass Boolean(isOpen).
The two calls must use the same element and the same class:
example.jsNo problems
if (isOpen) {
menu.classList.add("open");
} else {
menu.classList.remove("closing");
}