pnpm이랑 Turbo로 모노레포 세팅하고 Prettier 공통 설정을 패키지로 빼서 쓰다 보면, 희한하게 터미널에선 잘 되는데 VS Code에서만 Format on Save가 안 먹힐 때가 있습니다.
Prettier 로그를 열어보면 대충 이런 에러가 떠있죠.
Error: Cannot find module 'prettier-plugin-tailwindcss'
분명 공통 설정 패키지(@repo/prettier-config)에는 설치를 해뒀는데, VS Code 확장 프로그램이 이걸 못 찾아서 생기는 문제입니다. 앱마다 똑같은 플러그인을 중복으로 깔자니 모노레포 쓰는 의미가 퇴색되는 것 같고... 이럴 때 깔끔하게 해결하는 방법을 공유합니다.
왜 못 찾는 걸까?
VS Code의 Prettier 확장은 현재 작업 중인 파일의 위치나 프로젝트 루트에서 플러그인을 찾으려고 합니다. 그런데 모노레포 구조에선 실제 플러그인이 저 멀리 공통 패키지의 node_modules 안에 숨어있으니 확장 프로그램 입장에선 "플러그인 어디 있어?" 하고 뻗어버리는 거죠.
특히 ESM 방식(type: module)을 쓰면 모듈 탐색이 더 까다로워지는데, 이걸 해결하려면 절대 경로를 직접 꽂아주는 게 가장 확실합니다.
해결: 절대 경로 주입하기
createRequire를 써서 플러그인이 설치된 실제 경로를 찾아낸 다음, Prettier 설정의 plugins 배열에 넘겨주면 됩니다.
packages/prettier-config/base.js 수정
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
export default {
singleQuote: true,
semi: false,
tabWidth: 2,
trailingComma: 'es5',
printWidth: 80,
bracketSpacing: true,
arrowParens: 'avoid',
endOfLine: 'auto',
// 이름만 적는 게 아니라 require.resolve로 실제 파일 위치를 넘겨줍니다.
plugins: [require.resolve('prettier-plugin-tailwindcss')],
}이렇게 하면 prettier-config 패키지가 있는 위치를 기준으로 플러그인을 찾아서 절대 경로를 반환합니다. VS Code 확장은 이 경로를 보고 바로 플러그인을 로드할 수 있게 됩니다.
적용 결과
수정하고 나서 VS Code에서 Cmd + Shift + P -> Developer: Reload Window 한 번 해주세요.
이제 하단 바에 Prettier가 정상 작동하면서, 파일 저장할 때마다 Tailwind 클래스 정렬이랑 포맷팅이 아주 시원하게 잘 돌아갈 겁니다.
요약
- 각 앱마다 플러그인 깔지 말고 공통 설정 패키지 하나에서 관리하자.
- 인식이 안 되면
require.resolve로 절대 경로를 주입하면 끝.
