도입 이유
tailwind의 className의 스타일이 달라 코드리뷰할 때 확인이 어려웠습니다.
정리가 되어 있지 않아 중복이 있었지만 한눈에 확인하기 어려움
className="flex items-center w-64 place-content-around rounded-full box-border border-none bg-white1 bg-opacity-70 px-4 w-64"
정리가 되어 있어 확인이 가능
className="box-border flex w-64 w-64 place-content-around items-center rounded-full border-none bg-white1 bg-opacity-70 px-4"
방법
1. VSCode의 확장에서 Prettier 설치
2. prettier-plugin-tailwindcss 설치
pnpm install -D prettier prettier-plugin-tailwindcss
- 프론트엔드는 pnpm을 사용하기에 pnpm으로 변경하여 설치했습니다.
3. .prettierrc 파일에 내용 추가
{
"plugins": ["prettier-plugin-tailwindcss"]
}
- 파일이 없다면 디렉터리 최상단에 추가를 합니다.
4. 이제 저장하면 자동정렬이 됩니다.
