Prettier 미적용 오류 해결

프론트 깎는 개발자·2023년 1월 20일

Node Prettier extension npm npm package vscode

문제 상황

하나의 프로젝트를 진득하게 오랫동안 하다가, 이따금씩 새로운 프로젝트를 시작하려고 각종 라이브러리를 설치하고, 번들러를 initialize 하고, linting, prettier 세팅도 하다 보면 막힐 때가 가끔씩 있다.

이번에도 오랜만에 새 프로젝트 셋업을 하다가, prettier 이 계속 아래와 같은 오류를 내었다.

["ERROR" - 4:53:55 PM]  - 
Failed to load module. 
If you have prettier or plugins referenced in package.json, 
ensure you have run `npm install`

(이 오류는 VSCode 사용시 하단의 빨간색으로 표시되는

prettier 버튼을 누르면 표시되는 에러로그이다)

해결

위의 에러 로그 바로 위에 보면

["INFO" - 4:53:55 PM] Attempted to determine module path from 
/Users/...

라고 표시된다. 이 에러 로그를 보고서는 VSCode 가 아예 prettier module 자체를 찾지 못하는 것은 아닐까 라는 생각이 들었다.

그래서 vscode 설정에 가서 "prettier path" 를 검색했더니 아래와 같이 3번째의 Prettier Path 칸이 비어 있었다.

아래에 조그마한 글씨로 "Path to the prettier module" 이라고 적혀 있는 것으로 봐서는 제대로 찾아온 것 같았다. 즉, 여기에 prettier 모듈의 위치를 알려줘야 VSCode 가 여기서 찾아서 쓸 수가 있는 것이었다.

여기 를 참고해서 이 값을

/usr/local/lib/node_modules/prettier 로 변경하였다.

([참고] Windows 에서는 \AppData\Roaming\npm\node_modules\prettier 이다.)

단, 이 경로는 전역으로 prettier 패키지가 설치되어 있을 경우에 한한다. 이렇게 해도 작동이 되지 않는 경우는 전역으로 prettier 이 설치되어 있지 않는 경우이다. 그럴 때는 아래의 명령어로 전역으로 prettier 을 설치해 준다.

npm install --global prettier

그러면 아래와 같이 설정이 된 상태이고, 그리고 이제 다시 시도를 해 보면 오류가 해결되었음을 알 수 있다!

그.러.나!

몇 가지 생각해봐야할 포인트가 있다.
생각해보면 prettier 도 엄연한 npm 패키지이고, update 가 있음에 따라 여러 가지 version 이 존재할 것이다.

그런데 이렇게 프로젝트 자체에

npm install prettier

을 통해서 사용하는 것이 아니라 각 협업 멤버들의 로컬 머신에 전역으로 설치된 prettier 에 의존하면, 각자가 다른 version 의 prettier 을 사용하게 된다. 그래서 아무리 .prettierrc 라든가, .prettierignore 의 파일로 prettier 규칙을 프로젝트에서 규정해주고 있더라도, 서로 다른 버전의 prettier 을 사용하는 것은 (아무리 사소할지라도) 문제가 될 수 있다.

그래서 이런 대규모 프로젝트에서는 prettier 자체를 프로젝트 내부의 package.json 에 명시적으로 버전 정보과 관리되고, 그에 따라 로컬 머신의 전역 prettier 과 관계 없이 프로젝트 내부의 node_modules 에 설치되도록 하여 모든 기여자들이 같은 버전의 prettier 을 쓸 수 있도록 하는 것이 더 권장된다.