yarn berry (yarn V2) VSCode 설정

yarn berry를 설치하고 VSCode에서 프로젝트를 열게되면 아래와 같이 react등 import 해오는 모든 module들에서 에러를 접하게 되는데 VSCode에서 Extention을 설치해 주면된다.

 

1. ZipFS - a zip file system extension 설치 (참조)

• yarn PnP 모드에서는 패키지를 zip형태로 관리한다. 따라서 사용한 패키지의 원래 코드를 보기위해서는 (go-to-definitions 기능을 사용하기 위해서는) ZipFS와 같이 zip 저장소에 저장된 파일들을 바로 읽을 수 있는 extension을 설치해주어야 한다.
• 아래 extention을 설치하면 .vscode/extensions.json 파일 생성된다.

 

 

2. @yarnpkg/sdks 설치 (참조)

• yarn dlx 패키지 : 임시 환경에서 패키지를 실행할 때 사용하는 명령어
• eslint, prettier, typescript 등을 지원하는 ide tool의 workspace에서 작동되려면 아래 명령이 필요
• 아래 명령어를 실행하면 .vscode/settings.json에 설정이 추가된다.

$ yarn dlx @yarnpkg/sdks vscode

 

 

3. vscode에서 TypeScript 설정 활성화 하기

• vscode를 사용하는 경우 보안문제로 타입스크립트 설정을 명시적으로 수행

3.1. TypeScript 버전 사용

위에서 yarn dlx @yarnpkg/sdks vscode를 실행하게 되면 아래와 같이 나오는데 허용을 해준다.

 

 

3.2. TypeScript 버전 수동 설정

Cmd + Shift + P -> Setting Typescript version -> 선택