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

사용 방법

구성 파일 또는 명령줄 인터페이스에서 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

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

CLI

oxlint --deny unicorn/prefer-classlist-toggle

참고 자료

• 규칙 소스