module.exports = {
plugins: [require('prettier-plugin-tailwindcss')],
ailwindConfig: './tailwind.config.cjs',
}
대충 클레스명도 알아서 테일윈드에 맞게 정렬해주는 공홈에서 사용하길 추천하는 플러그인임
prettier.config.js를 요런식으로만 복붙만하면 되는 아주 간단한 설정이었음
<button className="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">
...
</button >
// after
<button className="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">
...
</button>
하지만 에러뜸;
본인 vite 기반임.
vite는 기본으로 type: module 써서 require를 못 씀;
그럴 때는
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
이렇게 require를 사용할 수 있음
하지만 ctrl + s할 경우 마찬가지로
require() of ES Module ~ from ~ not supported prettier 콘솔에 이런 에러가 뜨면서 포매팅이 안됨
시발 그럼 대체 어쩌라고?
결국 .prettierrc로 바꾸고 json 형식으로 하니 잘 돌아감;
오늘도 시간낭비했음 자야지
Vite가 웹팩에비해 어떤 강점있음??
구글링해보셈 난 무거운 거 번들링 안 해봐서 그닥 차이 몰루겠음
https://tailwindcss.com/docs/editor-setup#automatic-class-sorting-with-prettier
그냥
이거 써