yarnberry에서 prettier plugin과 prettier 적용 방법

🐕 Yarn berry Cannot find module prettier

별 생각없이 prettier가 잘 동작할거라고 믿었지만.. 제 기대를 처참히 배신하는 yarn berry 그래요... 그럴 수 있지.. 하지만 내가 겪는 이 문제는 보통 대부분의 사람들이 이미 겪은 문제일 것이다. 라는 생각과 얼마전 다른 분이 yarnberry에서 prettier 적용 문제로 골치아파하시는 것을 보아서 어느정도 저도 예상은 하고 있는 문제였습니다. 다행히 해결방법이 그리 까다롭지는 않아서 약간의 구글링으로 해결할 수 있었어요

 

알아보니 yarn berry의 PnP를 사용할 때 prettier 를 인식하지 못하는 문제는 꽤 큰 이슈 중 하나로 이미 과거에 많이 다루어진 전적이 있었고 yarn docs에서도 해결 방법을 안내해주고 있는 문제였습니다.

 

https://kasterra.github.io/setting-yarn-berry/ 

 

제게 아주 큰 도움이 된 블로그를 링크하면서 간단하게 부가설명을 덧붙이도록 하겠습니다.

 

prettier가 우리 생각대로 동작하지 않고 module을 찾을 수 없다는 에러가 발생하는 이유는 당연하게도 yarn berry를 이용하면 node-modules 폴더가 없다는 자명한 사실에 기인합니다. PnP 기능을 이용할 때 eslint와 prettier의 파일을 찾지 못하여 prettier 확장이 제대로 동작하지 않는 문제가 바로 제가 마주한 문제입니다.

 

typescript를 적용하는것과 비슷한 방식으로 해결할 수 있는데 vscode 환경을 가정하고 서술하면

 

yarn dlx @yarnpkg/sdks vscode

 

위 명령어를 통해 해결해줄 수 있습니다.

다만 주의할점은 prettier를 설치하기 전에 실행한 명령어는 의미가 없기때문에 prettier를 설치해준 다음 실행해주면 되겠습니다. 즉 이러한 순서로 명령을 실행하면 됩니다.

 

yarn add -D prettier prettier-plugin-tailwindcss
yarn dlx @yarnpkg/sdks vscode

 

plugin을 적용하는 예시를 보여드리기 위해 tailwindcss의 플러그인을 추가로 설치하겠습니다.

tailwind를 사용할 예정이 없으신 분은 prettier만 설치하시면 되겠네요

이렇게 prettier를 설치한 후  sdks 명령어를 실행해주면 끝입니다.

다만 기존에는 설치하는것만으로 자동적용되던 plugin이 동작하지 않는 것을 확인할 수 있습니다.

이를 해결하기 위해서는 prettierrc.js , 혹은 .prettierrc 파일을 수정해야합니다.

 

---

👻prettier plugin을 적용시키기 위해서는.

.prettierrc

{
    "singleQuote": true,
    "useTabs": false,
    "trailingComma": "all",
    "semi": true,
    "printWidth": 80,
    "tabWidth": 2,
    "plugins": ["prettier-plugin-tailwindcss"]
}

전 .prettierrc를 사용하는 편이어서 prettierrc 기준으로 서술했습니다.

핵심은 plugins  프로퍼티를 명시하고 plugin을 추가시켜주는것입니다.

https://zih0.tistory.com/46?category=941586

prettierrc.js를 사용하는 해결방법은 위 블로그를 참고하시는것을 추천드립니다.

---

🐶마치며

yarnberry 장점 : nodemodules를 사용 하지 않음

yarnberry 단점 : nodemodules를 사용 하지 않음

 

눈물이 흐르는 PnP 방식.. npm이 조금 그리울지도..? 

---

이해했다고 생각할 때가 가장 무서울 때다.