[기록/환경세팅] VS Code 설치

프론트엔드 IDE로 유명한 Visual Studio Code를 설치하는 과정입니다.

■ Visual Studio Code 설치

공식 홈페이지에서 운영체제에 맞는 Stable 버전을 다운로드 받으셔서 설치 진행하시면 됩니다. [공식홈페이지 바로가기]

💬 Stable과 Insiders가 뭐가 다르나요?

• Stable : 안정화 버전
• Insiders : 테스트 버전

Insiders 버전은 정식 출시 이전의 테스트 버전으로, 최신 기능을 먼저 사용할 수 있지만 불안정하고 버그 발생 확률 높습니다. Stable 버전은 안정화를 거쳐 버그가 최소화된 버전이니 최신 기능을 이용해 봐야 되는 게 아니라면 Stable을 추천드립니다.

Next 계속 누르시면 됩니다.

설치 전, 옵션을 선택하는 화면입니다. 저와 똑같이 설정할 필요는 없습니다.

옵션 설명이 이해 안 되시는 분은 아래 글을 계속 읽어주세요!

 

옵션 선택이 끝났다면 '다음'으로 넘기세요.

설치가 진행됩니다.

 

설치 진행이 끝나면 VS Code 설치가 끝납니다.

 

감사합니다! :)

---

■ [첫 번째 옵션] 바탕 화면에 바로가기 만들기

첫 번째 옵션을 설명하려고 보니, 깜빡하고 바로가기 아이콘 옵션을 선택하지 않았습니다.

설치 경로에 들어가서 직접 추가해 보려고 합니다. 설치할 때, 경로를 변경하지 않았다면 아래 경로를 파일 탐색기 주소에 붙여넣으시면 됩니다.

C:\Users\user\AppData\Local\Programs\Microsoft VS Code

우클릭 > 보내기 > 바탕 화면에 바로 가기 만들기

바탕 화면에서 VS Code 바로가기 아이콘이 추가된 걸 확인할 수 있습니다.

💬 C드라이브 아래 'Users' 폴더가 없어요.

• 윈도우가 한국어로 세팅되어져 있으면, 몇 폴더는 한국어로 바뀌어져서 보여요.
• C드라이브 아래 'Users'가 '사용자' 폴더 입니다.

 

💬 'C:/사용자/user' 아래에 'AppData' 폴더가 없어요.

• AppData는 숨긴 파일로 되어져 있습니다.
• 아래 포스팅을 참고해서 파일 탐색기 옵션을 변경해주세요.

[기록/환경세팅] Windows 파일 탐색기에서 숨김 파일 및 폴더 보기

---

■ [두, 세 번째 옵션] Code(으)로 열기 : 마우스 우클릭 메뉴에 'VS Code 열기' 추가

저처럼 설치 옵션에서 "Code(으)로 열기"를 선택하지 않으셨다면, 아래 포스팅을 참고해서 마우스 우클릭에 메뉴를 추가할 수 있습니다.

Visual Studio Code(비쥬얼 스튜디오 코드) 마우스 오른쪽 버튼 클릭시 Open Folder as Visual Studio Code 나타

마우스 우클릭에서 "Edit with VS Code" 또는 "Open Folder as VS Code Project"를 확인할 수 있습니다.

---

■ [네 번째 옵션]  VS Code를 기본 편집기로 사용

한글 파일을 누르면 워드나 파워포인트가 아닌 한글 프로그램으로 열리는 것처럼, VS Code에서 열 수 있는 파일에 한 해서 파일을 열 때 바로 VS Code로 연결됩니다.

---

■ [다섯 번째 옵션] CLI에서 VS Code 실행

VS Code 설치 중 "PATH에 추가" 옵션을 선택하지 않았을 경우, 환경 변수에 직접 추가해주면 됩니다.

우선, PATH 추가가 됐는지 확인하는 방법은, CLI에서 "code" 입력어가 실행되는지 보면 됩니다.

VS Code에 대한 PATH가 환경 변수에 추가되지 않았기 때문에 추가해 보겠습니다.

설치할 때, 경로를 변경하지 않았다면 아래 경로를 PATH에 붙여넣으시면 됩니다.

C:\Users\user\AppData\Local\Programs\Microsoft VS Code

CMD 또는 PowerShell, 터미널 등에서 "code"를 입력하면 VS Code가 실행됩니다.

CMD(명령 프롬프트)에서 명령어로 VS Code

PowerShell 에서 명령어로 VS Code 실행하기