← Back to rules

unicorn/prefer-classlist-toggle スタイル

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

何をするのか

条件付きの add() / remove() パターンよりも、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 でこのルールを 有効化 するには、以下のようにします：

Config (.oxlintrc.json)

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

CLI

oxlint --deny unicorn/prefer-classlist-toggle

参照

• ルールのソース