[Source Code Editor] VS Code《Visual Studio Code》

VS Code란?

마이크로소프트가 개발한 소스 코드 편집기로 디버깅 지원과 Git 제어, 구문 강조 기능 등이 포함되어 있습니다.

 

 

 

명령어

명령팔레트

에디터의 모든 명령에 바로 접근할 수 있는 명령팔레트입니다.

단축키: ctrl+shift+p

또한 우측에 보면 기본단축키로 명령을 실행할 수도 있습니다.

단축키에 대한 모든 명령은 맥, 리눅스, 윈도우 에 있습니다.

• ctrl+p : 파일이나 기호를 탐색합니다.
• ctrl+shift+tab : 마지막 연 파일에 접근합니다.
• ctrl+shift+p : 편집기 명령으로 바로 이동합니다.
• ctrl+shift+o : 파일의 특정 기호로 이동합니다.
• ctrl+g : 파일의 특정 행으로 이동합니다.

ctrl+p 를 눌러 ? 를 입력하면 명령창에서 행할수 있는 명령 목록이 나옵니다.

빠른열기

모든 파일을 단축키로 빠르게 열수 있습니다.

단축키: ctrl+p

상태표시줄

에디터 하단에 현재 상태를 표시하고 있습니다.

단축키: ctrl+shift+m

신속하게 프로젝트의 오류 및 경로로 이동합니다.

F8 또는 shift+F8 을 이용해서 오류 사이를 이동할 수 있습니다. 또는 키보드의 위아래 화살표로 이동이 가능합니다.

언어모드

파일형식에 맞는 언어모드로 자동으로 인식하지만 못할때는 단축키로 지정할 수 있습니다.

단축키: ctrl+km

ctrl+km 은 ctrl+k 을 누르고 다음으로 m 을 누르면 됩니다.

테마변경

기본적으로 제공하는 테마를 단축키로 빠르게 선택할 수 있습니다.

단축키: ctrl+k, ctrl+t

또한 파일>기본설정>색 테마 로 선택할 수도 있습니다.

파일아이콘테마

기본적으로 파일의 아이콘을 표시하지만 확장기능을 통해 직관적으로 파일의 아이콘을 보여줍니다.

파일>기본설정>파일 아이콘 테마 를 통해서 적용할 수 있습니다.

Material Icon Theme 를 설치한 후 적용한 아이콘테마의 모습입니다.

단축키

기본 단축키는 ctrl+k, ctrl+s 를 통해 열람할 수 있습니다.

단추키를 사용자정의 할때는 keybindings.json 파일을 통해 지정할 수 있습니다.

기본설정

vscode 의 모든 설정은 파일>기본설정>설정에 지정되어 있습니다.

단축키: ctrl+,

왼쪽의 기본설정을 복사해서 오른쪽의 사용자설정에 붙여넣고 수정해서 사용합니다.
또는 왼쪽의 기본설정에 연필 아이콘을 클릭하면 편집을 통해 수정하면 오른쪽에 자동 입력되어 집니다.

확장프로그램

에디터의 기본 기능보다 더 많은 기능을 마켓 플레이스에서 다운로드해서 사용할 수 있습니다.

단축키: ctrl+shift+x

vscode 는 확장프로그램을 좀더 효율적으로 관리하기 위해 설치된 확장만 표시, 모든 확장 표시, 사용할 수 없는 확장 표시 등등...다양한 메뉴를 제공하고 있습니다.

터미널

vscode 는 하단에 터미널을 통해 명령을 실행할 수도 있습니다. 보기>통합터미널 로 열 수 있습니다.

단축키: ctrl+`

사이드바 전환

에디터의 사이드바를 열고 닫습니다.

단축키: ctrl+b

젠모드

단축키: ctrl+k, z

나란히편집

에디터를 둘 또는 셋으로 나란이 놓고 사용할 수 있습니다.

단축키: ctrl+\

에디터간 전환은 ctrl+1, ctrl+2, ctrl+3 등으로 할 수 있으며, ctrl+w 누르면 탭이 닫힙니다.

 

다중커서

커서를 여러개 만들어서 한번에 작업을 할 수 있습니다.

단축키: ctrl+alt+up , ctrl+alt+down

행 복사

단축키: shift+alt+up , shift+alt+down

코드접기/펴기

단축키: ctrl+shfit+[ , ctrl+shfit+]

마크다운 미리보기

단축키: ctrl+shfit+v

또한 옆에서 미리보기를 하면서 수정까지 실시간으로 반영되게 할 수도 있습니다.

단축키: ctrl+kv

 

emmet

vscode 에서는 기본적으로 emmet 확장기능을 지원합니다.

젠코딩을 하면 툴팁으로 어떻게 보여지는 미리보기를 통해 보여져서 코딩하기 정말 좋습니다.

emmet 은 기본적으로 활성화되어 있어 바로 사용가능하지만 혹시 활성화가 안된다면 설정에 아래구문을 확인하면 됩니다.

 

 

"emmet.triggerExpansionOnTab": true

 

 

출처 : demun.github.io/vscode-tutorial/

참고 1. Extensions - Code Runner