[TS] VSCode에서 yarn berry + TypeScript 셋팅하기

Mac OS를 기준으로 하고 있습니다.

VSCode

먼저, VSCode가 설치되어있어야한다. 설치되지 않았을 경우, 공식 홈페이지에서 환경에 맞는 버전을 다운로드한다.

Visual Studio Code - Code Editing. Redefined

Node.js

node는 버전 관리 용이를 위해 nvm을 사용하여 설치한다.

nvm을 사용하면, 하나의 pc에서 여러 node.js 버전을 간편하게 변경하여 사용할 수 있다.

mkdir ~/.nvm
vi ~/.zshrc

...
# G를 입력하여 맨 하단으로 이동 후, 아래 내용을 입력 후 저장(:wq)
export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
...

source ~/.zshrc

사용할 노드 버전을 nvm을 사용하여 깔아준다.

nvm install 20.11.1
nvm ls
nvm use 20.11.1
nvm alias default 20.11.1

nvm ls

프로젝트 생성

(생략)

yarn berry

yarn -v
yarn set version berry

프로젝트 내부에서 yarn set version berry를 입력하면 yarn 버전을 berry로 바꿀 수 있다.

yarn berry(PnP 모드) 사용 시 모든 모듈은 .yarn/cache 폴더에 zip 파일로 압축되어 저장된다. (즉, 패키지를 zip 형태로 관리한다.)

그래서 특정 모듈의 코드를 보기 위해서는 압축을 풀어야한다. 유료 에디터(ex. 웹스톰, 인텔리제이)에서는 zip 형태로도 접근이 가능하지만, VSCode에서는 확장을 설치해주어야한다.

압축을 해제하지 않으면, 모듈이 인식되지 않고 에러를 표시한다.

ZipFS-a zip file system

yarn berry에서 압축된 패키지인 zip 파일을 해제하기 위해서 사용하는 확장이다.

yarn dlx @yarnpkg/sdks vscode

추가로 필요한 확장

ESLint

ES(EcmaScript) + Lint를 의미하며, 클린 코드를 작성하는데 도움을 주는 확장이다.

기본적으로 JS에서는 문법을 잡아주지않으므로 확장 기능을 설치하여 사용하면 문법적 에러를 표시해주므로, 코드 작성에 도움이 된다.

Prettier

정해진 규칙에 따라 자동으로 코드 스타일을 정리 해준다. (코드 정렬, 코드 포맷)

---

설정하는 과정에서 확장을 추가하다가 충돌이 발생하는 경우가 있으므로, 그럴 경우에는 VSCode를 재설치하여 순서대로 재진행하는 것을 추천한다. (충돌 발생 시 오른쪽 하단에 경고 메세지가 뜨기도 한다.)

-- 다시 수정하여 재업 예정 --