본문 바로가기

도구/도구 (Tools)

[VS Code/Windows 10] Visual Studio Code 다운로드, 확장(Extension) 프로그램 설치

#

VS code는 가볍고 편리하게 사용할 수 있는 소스 코드 에디터입니다. Windows, Mac, Linux에서 전부 사용할 수 있고 특히 Git을 연동할 수 있고 다양한 확장기능이 있어서 파이썬이나 자바같은 프로그래밍 언어도 사용할 수 있습니다.

 

# 설치

code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

VS Code 공식 홈페이지에서 설치파일을 다운로드 합니다. 메인화면에서 바로 다운로드 받을 수 있습니다.

설치파일을 실행하면 다운로드가 시작됩니다.

 

다운로드 설치 파일

 

라이센스에 동의하고 다음을 클릭합니다.

 

 

사용권 계약

 

 

VS Code를 설치할 경로를 선택합니다.

아래 사진처럼 그대로 두셔도 되고 찾아보기를 클릭해서 직접 경로를 지정할 수 있습니다.

 

경로 설정

 

 

추가 작업을 선택하면 됩니다. PATH에 추가만 기본으로 선택되어 있지만 저는 기타 항목에 있는 모든 부분을 선택하겠습니다. 다음을 클릭하면 설치가 시작됩니다.

 

추가 작업 선택

 

 

설치가 완료되면 아래 화면처럼 기본 화면을 확인할 수 있습니다.

 

설치 완료

 

 

# 확장(Extensions) 프로그램 설치

 

VS Code에 확장 기능을 추가로 설치하겠습니다. 좌측 메뉴에서 가장 아래에 있는 아이콘이 확장 프로그램을 설치하는 아이콘입니다. 확장 프로그램 아이콘 선택 → 검색창에 필요한 프로그램을 검색 → 설치(Install)하면 됩니다.

 

설치방법

 

 

 

 

아래 소개하는 확장 프로그램은 많은 분들이 사용하는 확장 프로그램입니다.

 

Prettier - 코드를 자동으로 정리합니다.


open in browser - 브라우저에서 현재 코드를 확인할 수 있습니다.


Beautify - 자동으로 코드 들여쓰기를 합니다. (단축키 설정 필요)


ESLint - 자동으로 코드 문법 검사를 합니다.

 

 

아래 소개하는 확장 프로그램은 개인적으로 사용해보고 편하거나 재밌었던 확장 프로그램입니다.

 

Active File in StatusBar - 상태 표시 줄에 현재 활성 파일의 경로를 표시합니다. (클릭하면 복사)


Auto Rename Tag - 쌍을 이루는 HTML / XML 태그의 이름을 자동으로 바꿔줍니다.


Material Theme - 다양한 테마 디자인을 제공하고 변경할 수 있습니다.


Material Icon Theme - 다양한 아이콘 디자인을 제공하고 변경할 수 있습니다.


Relative Path - 현재 작업 공간의 파일에서 상대경로를 가져옵니다.


WakaTime - 나의 개발 시간과 주 사용 언어 등 생산성 지표를 보여줍니다.