vscode eslint 저장 지연

💡

nestjs/cli와 yarn berry zero install로 세팅후 코드를 저장하면 위의 이미지와같이 저장 지연 이슈가 발생했다. 수많은 시행착오가 있었고 해결할 수 있을줄 알았으나 끝내 해결하지 못했다. nestjs에서는 그냥 node_modules를 사용하기로 했다.. 그럼에도 내가 시도했던 방법들을 기록했다. 누군가에게는 이정표가 되지 않을까 하는 마음에..

방법1

tsconfig.json 파일 설정 변경


{
  "compilerOptions": {
   // 기본적으로 설정되어있는 세팅은 건드리지않았다.
   ...,
  },
  // 이부분만 추가해줬음
  // 나는 yarn을 사용해줘서 .yarn을 추가해줬음
  "exclude": ["node_modules", ".next", ".yarn"]
}

출처:https://github.com/DearYuto/ReasonColors/issues/3

방법2

💡

방법1로도 해결이 안됬다면 방법2를 써보자

vscode 마켓에서 Auto import es6,ts,jsx,tsx를 비활성화 해주자

출처:https://github.com/prettier/prettier-vscode/issues/1333

나도 똑같이 비활성화시켜줬더니 save가 빨라졌다🙌

방법3

💡

🐶💩같다. 해결된것처럼 보였지만 잠시뒤 다시 같은 이슈가 발생했다. 방법1과 방법2가 안됬다면 최후의 방법3을 써보자.

먼저 터미널에 명령어를 쳐보자

(참고로, 리눅스 기준 명령어다. 챗지피티나 검색을통해 자신의 os에맞는 터미널 명령어를 입력하자)


which prettier
// /usr/local/bin/prettier 가 출력되거나, prettier이 전역으로 설치 안되어있는 사람은 아무것도 출력이 안된다.

혹시 prettier이 전역으로 설치가 안되어있는 사람은 전역으로 설치해주자


npm install -g prettier , 혹은
sudo npm install -g prettier

설치가 완료되었으면 vscode로 와서,

설정→settings.json 파일을 수정해주자.

부분 수정을 할것이기 때문에 컨트롤+f를 눌러 "prettier.prettierPath” 부분을 찾아서

터미널에which prettier 명령어를 쳐서 나온 주소를 입력해주자

나는 /usr/local/lib/node_modules/prettier 가 나왔기 때문에 다음과 같이 입력해줬다.


"prettier.prettierPath": "/usr/local/bin/prettier", // 로 되어있던 부분을,
"prettier.prettierPath": "/usr/local/lib/node_modules/prettier" // 로 수정해 줬다.

vscode 재시작하면 이제 엿같은 prettier formatOnSave가 지연되는 이슈가 없어진걸 확인할 수 있다.

이게 다야 🙌

(아무튼 나는 해결함)

해결된 줄 알았는데 아니였다.

yarn berry pnp 옵션을 적용시키고,

vscode 세팅을 동기화시켜주면 다시 저장지연이 발생했다.

솔직히..어떤 구조적인 문제인지 잘 모르겠다.

리액트 cra로 설치한 프로젝트에서 pnp옵션 적용은 잘만 됬었는데 말이다..

먼 훗날 이 문제에대해서 해결의 실마리를 잡으면 다시 돌아와 글을 작성하겠다🔥

vscode eslint 저장 지연

방법1

방법2

방법3

댓글