불필요한 공백과 중복 클래스 이름 자동 정리

Date
Catalyst 애플리케이션 레이아웃 미리보기

정렬 시 불필요한 공백과 중복 클래스를 제거하는 기능을 추가한 prettier-plugin-tailwindcss의 새 버전을 출시했습니다.


불필요한 공백 정리하기

클래스 이름을 복사하거나 리스트 중간에서 클래스 이름을 삭제할 때, 정리해야 할 불필요한 공백이 생기기 쉽습니다.

이제 Prettier 플러그인이 이를 자동으로 처리해주기 때문에, 여러분이 직접 정리할 필요가 없습니다.

function MyComponent({ children }) {
  return (
    <div className=" mx-auto  max-w-7xl px-6 lg:px-8 ">
      {children}
    </div>
  )
}

중복 클래스 제거

우리의 VS Code 확장 프로그램은 오랫동안 중복 클래스 이름에 대해 경고해 왔습니다. 이제 Prettier 플러그인이 자동으로 중복 클래스를 제거할 수 있습니다.

function MyComponent({ children }) {
  return (
    <div className="flex bg-zinc-100 bg-zinc-100 px-4">
      {children}
    </div>
  )
}

여러분의 프로젝트에서 이러한 개선 사항을 사용해 보려면 최신 버전을 설치하세요:

$ npm i prettier-plugin-tailwindcss@latest

문제가 발생하면 GitHub에서 알려주세요!