🏞️ 글 작성 배경
yarn PnP모드로 전환 후 vscode의 typescript가 제대로 적용되지 않아 애를 먹었었다. 그래서 블로그글을 막 구글링하여 일단 세팅을 했었는데, 내가 어떤 명령어를 수행하고 뭐가 일어났는지 전혀 모르겠더라.
그래서 공식 문서를 기반으로 몰랐던 부분을 다시 짚어가며 정리를 해보았다!
✨ 과정
yarn PnP모드 사용 시, vscode와 같은 smart IDE에서는 TypeScript를 위한 특별한 설정이 필요하다.
editor SDKs 생성 및 세팅하기
yarn dlx @yarnpkg/sdks위 명령어를 실행하면 editor SDKs가 생성되고 설정들이 세팅된다.
yarn dlx 패키지: 임시 환경에서 패키지를 실행할 때 사용하는 명령어
-
@yarnpkg/sdks패키지를 이미 가지고 있는 경우라면yarn sdks명령어를 통해 editor SDKs 생성 및 설정 세팅을할 수 있다. 아래 명령어 중 적합한 놈을 실행해주면 된다.-
yarn sdks vscode vim: yarn에서 지원하는 editors(vscode, vim)에 맞는 base SDKs를 생성하고 설정 세팅해준다. -
yarn sdks base: yarn에서 지원하지 않는 editors를 위한 명령어로, base SDKs만 설치해주고 세부 설정들은 직접 세팅해주어야 한다. -
yarn sdks: 모든 설치된 SDKs와 editor settings를 업데이트 할 때 사용한다.
-
참고❗️
yarn PnP 모드에서는 패키지를 zip형태로 관리한다. 따라서 사용한 패키지의 원래 코드를 보기위해서는 (go-to-definitions 기능을 사용하기 위해서는) ZipFS와 같이 zip 저장소에 저장된 파일들을 바로 읽을 수 있는 extension을 설치해주어야 한다.
vscode에서 TS 설정 명시적으로 활성화하기
vscode를 사용하는 경우, 보안문제로 인해 타입스크립트 설정을 명시적으로 수행해주어야 한다.
yarn dlx @yarnpkg/sdks vscode실행 - 위의 editor SDKs 생성 및 세팅하기에서 이미 실행해주었다면 다시 할 필요 없음.cmd+shift+p=>Setting TypeScript Version입력 => 엔터Use Workspace Version클릭
📖 참고
