hayou
개발 카테고리로
dev6min read0

Prettier가 자동으로 적용되지 않던 이유(feat.nvm)

Prettier가 자동으로 적용되지 않던 이유(feat.nvm)

들어가며

프로젝트를 진행하며 가장 어려워하고 귀찮아하는 것이 있다. 바로 프로젝트 세팅.

빌드 도구를 결정하고, 사용 기술 스택들을 면밀히 검토하여 개발에 어려움이 없게 하는 과정이지만 항상 나에게는 큰 짐으로 다가왔다.

오늘도 자그마한 프로젝트를 시작하기 위해 세팅을 하던 도중, vscode에서 자동으로 prettier가 적용되지 않는 현상을 마주하고 말았다.

별 거 아닌 이야기지만, 누군가는 나와 같은 고통을 받았을까 하여 해당 내용을 기록해본다.

개발 환경

우선 내가 사용한 빌드 도구는 vite, 사용 언어와 프레임워크는 typescript와 react였다.

코드 에디터로는 vscode를 사용하였고, eslint와 prettier를 활용해 lint와 formatting을 적용하고자 하였다.

추가적으로 vscode의 extension은 Prettier - Code fomatter와 Prettier ESLint 두 가지가 설치되어 있었다. (불행의 시작?)

문제 해결을 위한 노력

1) .eslintrc 및 .prettierrc 확인

우선, eslintrc 파일에 다음 rule이 빠져있었다. 아이쿠. 이것만 추가하면 되겠지?

"rules": {
    // ... 기존의 다른 규칙들
    'prettier/prettier': 'error',  // Prettier와 충돌하는 코드를 에러로 표시
}

하고 vsc를 종료하고 재실행했다. 여전히 아무 일도 일어나지 않았다.

2) prettier가 작동하기는 하나?

설마 prettier가 아예 동작하지 않는건가? 라는 의문이 들었다. 그래서 파일에 직접 prettier를 실행해 실험해보았다.

$ npx prettier --write path/to/your/example.tsx

다행히 prettier는 정상적으로 동작했다. 그렇다면 vscode의 뭔가가 문제가 아닐까?

3) vscode의 설정 확인

아마 굳이굳이 이 글을 보고있다면 당연히 이 부분은 모두가 점검해보지 않았을까.

  • Editor: Foramt On Save 체크 확인
  • Editor: Default Formatter 확인 (당시에는 Eslint-Prettier로 설정되어 있었음)

아무튼 둘 다 정의되어 있는 것을 확인하고 다음 부분을 점검하러 떠났다. 아참 그전에 eslint-config-prettier가 설치되어있는지도 한 번 더 점검했다.

4) settings.json 확인하기

vscode의 settings.json을 확인했다. 당시 나의 settings.json이다.

{
  ...
  
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "eslint.codeActionsOnSave.rules": null,
  "editor.formatOnSave": true,
  "prettier.prettierPath": "/usr/local/lib/node_modules/prettier",
  
  ...
}

그래서 prettier가 실제로 저 path에 존재하는지 확인을 해보았다.

no such file or directory: /usr/local/lib/node_modules/prettier

엥. 내 프리티어는 어디로 간걸까. 그래서 prettier의 위치를 찾아주는 주문을 외쳐봤다.

$ npx where prettier
# npm ERR! could not determine executable to run

그렇다면 내 프리티어는 어디있었을까? 분명히 $ npm i -g prettier로 설치했었는데?

이번에는 다른 명령어를 입력해보았다.

$ npm list -g prettier
# /Users/hanbyeol/.nvm/versions/node/v20.9.0/lib
# └── prettier@3.2.5

그렇다. 프로젝트마다 달라지는 node version을 관리하기 위해 nvm을 설치해놓았었는데, nvm이 관리하는 node version 하에서는 global로 설치를 해도 기본 루트(/usr/local/lib/node_modules/)에 설치가 되지 않는다.

따라서 setting.json에 dir 주소를 적어놓을 경우 불러올 수 없게 된다.

이를 깨닫고 setting.json에서 prettier.prettierPath 행을 삭제해주었다.

5. default formatter 변경

아마 대부분은 4번까지 가기 전까지 문제를 해결했을 것이다.

하지만 나는 여전히 prettier가 자동으로 적용되지 않는 문제를 해결하지 못하였다.

마지막으로 settings.json에 있던 default formatter(editor.defaultFormatter)를 변경해주었다.

rvest.vs-code-prettier-eslint를 esbenp.prettier-vscode로 수정해주었다.

vscode의 extension을 변경해준 것인데, Prettier ESLint를 Prettier - Code fomatter 로 변경했다.

그랬더니 드디어.. 드디어 저장시 자동 포맷팅을 해주기 시작했다..!!

느낀 점

근본적으로 Prettier ESLint가 동작하지 않는 이유는 발견하지 못하였지만, 다양한 시도를 해보며 무의식적으로 사용하던 eslint와 prettier, 그리고 vscode와 nvm 등에 대해 이해도를 높일 수 있는 기회였다.

share

comments

loading…