VS Code 설치 방법 및 사용 설명

VS Code 설치 및 설정

VS Code 란?

• VS Code(VisualStudio Code)는 마이크로소프트(MS)에서 오픈소스로 개발하고 있는 소스 코드 에디터입니다.
• 깃허브의 일렉트론을 기반으로 만들어져 맥 OS, 리눅스, 윈도우 등 메이저 운영체제를 모두 지원하고 있습니다.
• Visual Studio와 이름이 비슷하지만 따로 개발되고 있으며 IDE보다는 코드 에디터에 가깝습니다.
• MIT 라이센스로 오픈소스로 공개되어 있으며, 무료로 사용할 수 있습니다.

설치

https://code.visualstudio.com/

Download for Windows 버튼 클릭시 자신의 OS에 맞는 버전을 설치합니다.

동의합니다 버튼을 클릭하고 다음

설치 할 위치를 지정하고 다음

다음

다음

설치

종료

확장 기능(Extensions)

• VS Code는 확장 기능을 제공하며 최초 설치한 버전에서 제공하지 않는 다양한 확장 기능을 외부에서 다운로드하여 연결 후 사용할 수 있습니다.
• 에디터의 버전업 과정에서 자체적으로 흡수하는 기능도 있을 수 있으므로 몇몇 확장 기능은 에디터의 버전에 따라 이미 지원하고 있으니 해당 기능이 제공되는지 확인하고 설치하는 것을 추천합니다. 

한글지원(Korean Language Pack for Visual Studio Code)

• VS Code의 거의 모든 메뉴가 한국어로 변경됩니다.

Korean Language Pack for VIsual Code Install버튼 클릭 후 재실행

Beautify

• 코드 가독성을 위해 코드 작성 스타일을 수정합니다.

Beautify 설치 버튼 클릭 후 재실행

• 파일 > 기본 설정 > 바로 가기 키 선택
• Beautify selection 검색 후 좌 측 + 버튼 클릭 후 Ctrl + Alt + L 키 바인딩 설정 ( 원하는 단축키 설정해도 무방 )

Live Server

Live Server 설치 버튼 클릭 후 재실행

• 하단 상태 바(Status bar)에서 GO Live 선택
• HTML 화면에서 우클릭 > Open with Live Server 선택

알아두면 좋은 단축키

Windows 단축키	macOS 단축키	설명
Ctrl + B	Cmd + B	사이브바 열기/닫기
Ctrl + P	Cmd + P	빠른 열기(파일이나 기호 탐색)
Ctrl + Shift + P	Cmd + Shift + P	모든 명령 표시(에디터의 모든 명령에 접근)
Ctrl + F	Cmd + F	찾기(검색)
Ctrl + H	Cmd + Opt(Alt) + F	찾기(검색)/바꾸기(대체)
Alt + Up	Alt + Up	줄 위로 이동
Alt + Down	Alt + Down	줄 아래로 이동
Shift + Alt + UpArrow	Shift + Alt + UpArrow	위에 줄 복사
Shift + Alt + DownArrow	Shift + Alt + DownArrow	아래 줄 복사
Tab	Tab	들여쓰기
Shift + Tab	Shift + Tab	내여쓰기
Ctrl + PageUp	Cmd + Shift + [	이전 편집기 열기(좌측 창으로 전환)
Ctrl + PageDown	Cmd + Shift + ]	다음 편집기 열기(우측 창으로 전환)
Ctrl + \	Cmd + \	편집기 분할(백슬래쉬)
Ctrl + 숫자	Ctrl + 숫자	숫자 번째 분할된 편집기 그룹에 포커스
Ctrl + W	Cmd + W	편집기 닫기