[Fix] 모노레포 환경의 Vscode에서 Eslint가 동작하지않는 현상

문제 상황

토이프로젝트를 진행하면서 pnpm으로 프로젝트의 구조를 모노레포로 변경을 하였다. 하지만 모노레포로 변경한 이후, 설정한 eslint가 vscode 에디터에서 eslint가 정상적으로 동작하지 않았다.

모노레포로 구성한 디렉터리 구조

.
├── packages/
│   ├── frontend
│   └── backend/
│       ├── src
│       ├── .eslintrc.js
│       ├── .prettierrc
│       └── package.json
├── package.json
├── pnpm-workspace.yaml
└── pnpm-workspace.lock.yaml

---

트러블슈팅

(1) vscode에서 린트에러가 뜨지 않아도 eslint가 정상적으로 동작하는지 확인

// eslint 에러가 나도록 파일 수정 후, eslint 명령어 실행
pnpm eslint ./packages/backend/src/models/user/user.service.ts

예상대로 린트 에러는 발생하고 있었다! 린트 룰에 의해서 User[]를 Array<User>로 변경하라는 에러이다.

터미널에서 린트 명령어 실행

 

하지만 vscode에서는 린트 에러가 발생하지 않는다. 아래 코드가 린트 에러가 발생한 코드이다.

vscode에서는 린트 에러가 발생하지 않음

 

(2) settings.json에 workingDirectories 설정

프로젝트를 모노레포로 구성하는 경우, vscode의 workingDerectories를 설정해줘야한다고 한다. 

 

Vscode에서 설정하는 방법은 다음과 같다.

1. command + shift + P

2. Workspace settings 검색

3. Working Directories 항목의 Edit in settings.json 선택

Vscode에서 Workspace settings > Working Directories 설정

나의 디렉터리 구조에 맞게 settings.json에 아래와 같이 값을 설정했다. 

{
    "eslint.workingDirectories": [
        { "pattern": "./packages/*/" }
    ],
    "eslint.validate": [ "javascript", "typescript", "javascriptreact", "html", "typescriptreact" ]
}

값을 설정한 뒤, extension을 재시작했다. 하지만 여전히 eslint가 동작하지않았다.

뭔가 이상해서 Restart ESLint Server를 실행해봤더니 아래 에러가 발생하고 있었다.

Command 'ESLint: Restart ESLint Server' resulted in an error

 

(3) Eslint 다른 버전으로 재설치

레퍼런스를 찾다보니, eslint 버전 문제일 수 있다고 해서 버전을 낮춰서 다시 설치했다.

Eslint 다른 버전으로 재설치

이후 eslint를 재시작했더니 vscode에서 정상적으로 린트 에러가 잡히기 시작했다!

---

해결방법 정리

1. 모노레포 환경이라면, vscode의 settings.json의 workingDerectories에서 path 설정하기
2. Eslint 다른 버전으로 재설치 후, vscode 재시작