yarn-berry에서 prettier plugin 적용법

https://toss.tech/article/node-modules-and-yarn-berry

node_modules로부터 우리를 구원해 줄 Yarn Berry

 

위 토스 테크 블로그를 보고 yarn-berry를 적용해야겠다고 생각했습니다.

yarn-berry의 장점은 위 블로그에 자세하게 나와있으니 한번 참고해보세요. :) 

---

 

yarn-berry로 마이그레이션 후, 이전에 적용되었던 prettier plugin들이 적용되지 않는 것을 깨달았습니다.

 

prettier 이슈에 가보니 역시나 해당 이슈에 대한 내용이 있었습니다.

기존에는 node_modules에서 plugin들을 찾아 적용시켜주었지만, yarn-berry는 node_modules를 생성하지 않고 .yarn/cache 폴더에 의존성의 정보를 저장하기 때문에 적용이 안되는 것이었습니다.

 

이는 기존 prettierrc.js 파일에 플러그인을 명시시켜줌으로써 해결할 수 있습니다.

 

예시로 prettier-plugin-tailwindcss 플러그인을 사용하겠습니다. 해당 플러그인을 적용시키는 방법은 아래와 같습니다.

//.prettierrc.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  printWidth: 100,
  tabWidth: 2,
  ...
};

 

기존에 .prettierrc 파일로 관리를 했다면, js 파일로 수정하여 plugins에 설치한 플러그인을 명시시켜줘야합니다.

 

 

---

혹시나 다른 방법이 있나 궁금해서 이슈를 더 뒤져봤는데 yarn berry 깃헙 문서에도 직접 지정해주라고 가이드하고 있는 것을 확인했습니다.

 

Prettier SDK does not use in memory node_modules anymore, instead it relies on prettier plugins to be specified in `plugins` prettier config property.

 

 

 

 

ref )

https://github.com/prettier/prettier/issues/7073#issuecomment-711420129

https://github.com/yarnpkg/berry/pull/2480/files