[Window 10] VSCode 초기 세팅하기 for React

원래 맥북을 사용하다가 이번에 window 환경에서 VSCode를 사용하게 되어서 기록합니다.

VSCode로 React 또는 프론트엔드 개발을 하기 위한 초기 세팅입니다!

출처: https://www.syncfusion.com/blogs/post/react-vs-code-extensions

1. (선택) 우분투 또는 리눅스 환경 만들기

 

윈도우에서 VSCode를 설치 후, 터미널을 열면 기본적으로 powershell이 열리는데 익숙한 명령어를 사용하기 위해 우분투를 따로 설치했다.

*git bash 등 다른 프로그램을 사용해도 된다.

 

먼저 powershell을 통해 wsl을 설치해 준다. 

wsl --install

 

VSCode의 터미널을 열어서 "+"를 누르면 wsl이 있는 것을 알 수 있다.

 

* 추가로 zsh를 설치해도 된다 (아래 레퍼런스 참고)

 

 

 

2. Git, nodejs 설치하기

- git 설치

sudo apt install git

 

버전 확인 했을 때 잘 나오면 설치된 것

 

- nodejs 설치

sudo apt install nodejs

 

* 만약 에러가 난다면 sudo apt update를 한 번 실행 한 뒤 다시 시도해 보기!

 

- nvm 설치

nvm 공식 레포

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

 

설치 후 본인이 편리한 편집기로 쉘 프로필 파일(ex. zshrc, bashrc, profile 등등..) 환경 변수를 설정한다. 

나는 vim을 사용했다!

vi ~/.zshrc

 

이렇게 넣어주면 됨

 

 

 

nvm 설치까지 끝나면 node 20 ver을 사용할 수 있도록 설정해 준다

nvm install 20
nvm use 20

 

 

 

결과물

 

3. 확장 프로그램 설치하기

VSCode에는 유용한 플러그인들이 많은데 프론트엔드(React) 개발에 유용하게 사용하고 있는 플러그인들은 다음과 같다.

 

1. Prettier

2. Eslint

3. Material Icon Theme

4. Auto Rename Tag

5. HTML CSS Support

6. CSS Peek

7. TailwindCSS IntelliSense (tailwind 사용 시 유용)

 

 

확장 프로그램은 개인 취향이지만 나는 이 정도는 기본으로 설치해 두는 것 같다.

 

이제 코딩 하러 갑시다 ㅎㅎ

---

References

1. WSL 설치

https://learn.microsoft.com/en-us/windows/wsl/install

Install WSL

 

2. (참고) VSCode에 zsh 설치하기

https://devbull.xyz/vscode-teomineol-zshro-bagguneun-beob-windows-10/

VSCode 기본 터미널 Zsh+Oh-my-zsh로 바꾸는 법 Windows 10

 

3. nodejs 설치하기

https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04

How To Install Node.js on Ubuntu 20.04 | DigitalOcean

3. nvm 공식 github repo

https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions