yarn PnP 사용 시 vscode에 typescript 세팅하기⚙️

최정윤·2023년 5월 20일
3
post-thumbnail

🏞️ 글 작성 배경

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를 사용하는 경우, 보안문제로 인해 타입스크립트 설정을 명시적으로 수행해주어야 한다.

  1. yarn dlx @yarnpkg/sdks vscode 실행 - 위의 editor SDKs 생성 및 세팅하기에서 이미 실행해주었다면 다시 할 필요 없음.
  2. cmd + shift + p => Setting TypeScript Version 입력 => 엔터
  3. Use Workspace Version 클릭

📖 참고

profile
매일 뿌듯하기🍬🍭🍡🍫

0개의 댓글