[vscode] 기초 사용법과 단축키

0. VisualStudio Code의 화면구성.

vscode의 화면은 크게 5개 영역으로 나뉨.

• Activity Bar: Explorer, Search, Version Control, Debug, Extensions 등의 Views를 선택할 수 있는 icon이 놓임.
• Side Bar: View가 놓이는 위치. Explorer, Search, Version Control, Debug, Extesions 등의 기본 Views 외에 각각의 설정 등에 따른 custom view들이 밑에 놓임.
• Editor: vscode는 본질적으로 text editor임.
• Panels: Editor 밑에 놓이며, Editor에서 활성화된 파일의 수행에 대한 output이나, terminal 및 debug 창 등이 놓임.
• Status Bar: 현재 상태 등에 대한 메시지가 나타나는 맨 하단의 영역.

추가로
중앙 상단의 입력박스 부분이 검색 입력창이며, Command Palette 등이 위치하는 부분임.

• 특정 명령어 수행시 추가로 사용자의 입력이 필요한 경우 해당 위치에 입력할 수 있는 컴포넌트가 보여짐.

---

1. Editor

vscode는 본질적으로 editor이기 때문에, 해당 영역에서 가장 많은 시간을 보내게 됨.

editor 부분은 아래 그림과 같이 구성됨.

1-1. Tabs

• 현재 열려있는 file들은 tabs에서 보임.
• Browser View의 상단의 OPEN EDITORS에 보여지는 list 와 같은 item으로 구성됨.
• Hotkeys
  • ctrl + 1 : activate leftmost tab (번호는 가장 왼쪽이 1이고 오른쪽으로 갈수록 하나씩 증가.
  • cmd + k, w : close all tabs in the current group.
  • cmd + k, cmd + w : close all tabs
  • cmd + w : close tab.
  • cmd + \ : (or ctrl + \) : split editor.

1-2. Breadcrumbs

• 현재 activated file의 위치(folders and file)와
  현재 cursor가 선택된 line에 대한 symbols (functions and variable 등)의 계층적 구조를 보여줌.
• 상위 영역으로 쉽게 이동가능하게 해 줌.

1-3. Indent Guides

• vertical line으로 들여쓰기 (indentation)을 도와줌.

1-4. minimap

• editor 의 오른쪽에 위치하며,
  shaded area를 드래그하여 이동시키거나
  left click을 하여 editor에서 보여지는 부분을 이동시킬 수 있음.
• code의 outline을 보여주기 때문에
  editor에서 다소 많은 line의 source code 편집시 유용함.

1-5. Hotkeys (editor관련)

• cmd + ] or [ (or ctrl + ] or [ : 선택된 블럭 또는 현재 행을 들여쓰기 수행.
• ctrl + / : 주석처리 toggle (커서가 위치한 행 or 선택된 영역)
• cmd + x (or ctrl + x): 선택된 영역 잘라내기 or 커서가 위치한 행 잘라내기.
• cmd + c (or ctrl + c): 선택된 영역 복사 or 커서가 위치한 행 복사.
• cmd + v (or ctrl + v): 붙여넣기
• cmd + f (or ctrl + f ): activated file 내에서 문자열 검색.
• cmd + option + f (or ctrl + h): activated file 내에서 문자열 검색 후 바꾸기
• cmd + shift + f (or ctrl + shift + f): 모든 files에서 검색.
• cmd + z (or ctrl + z): 실행취소
• cmd + shift + z (or ctrl + y): 실행취소 다시 수행.

---

2. Explorer

프로젝트 루트 디렉토리 밑을 Explorer로 보여줌.

• cmd + p (or ctrl + p ): 파일 찾기.
  • 파일 찾기로 할 경우에는 cmd+p 누르고 나타난 상단의 입력창에 그냥 파일명을 입력하면 됨.
  • 상단의 입력창에 colon :를 입력하고 숫자를 입력하고 엔터를 누르며 현재 편집중이 파일의 해당 row로 이동함.
• cmd + left_double_click (or ctrl + left_double_click): 해당파일 옆에 나뉘어진 editor로 열림.
• cmd + right_click (or ctrl + right_click): file multi-selection

---

3. Command Palette

vscode를 command로 제어할 때 사용되는 입력창.

화면 상단의 중앙에서 보여지는 input text field 임.

cmd + shift + p (or ctrl + shift + p )

command 검색 기능으로 활용하려면
입력창의 입력 문자열이 >로 시작해야 함.

---

Z. 그 외 많이 사용되는 Hotkeys

Windows에선
cmd 를 ctrl 로 대체.

cmd + k , s : 단축키 리스트를 보여줌.

~ ctrl + g : 특정 라인으로 이동. 해당 단축키를 누르면 이동할 라인번호를 입력할 수 있음.

ctrl + tab : 현재 열려있는 tab들을 이동할 수 있음.

cmd + shift + o : 현재 activated file 내의 object 들로 점프가능.

cmd + shift + p : command palette를 연다.

cmd + , : settings를 연다.