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

보통 macOS과 windows  에서 차이점은 cmd와 ctrl임.

• 단축키에서 macOS인 경우 cmd로 처리하면되고,
• windows의 경우는 ctrl로 하며 거의 문제 없음.

---

0. VisualStudio Code의 화면구성.

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

• Activity Bar: Explorer, Search, Version Control, Debug, Extensions 등의 Views를 선택할 수 있는 icon이 놓임.
• (Primary) Side Bar: View가 놓이는 위치. Explorer, Search, Version Control, Debug, Extesions 등의 기본 Views 외에 각각의 설정 등에 따른 custom view들이 밑에 놓임.
  • Explorer의 경우, ctrl + shift + e 단축키로 activation 됨.
• Editor (Group): vscode는 본질적으로 text editor임. 여러  Editor 창이 수평 또는 수직으로 분리되어 놓여질 수 있음.
• Panel(s): Editor 밑에 놓이며, Editor에서 활성화된 파일의 수행에 대한 output이나, terminal 및 debug 창 등이 놓임.
• Status Bar: 현재 상태 등에 대한 메시지가 나타나는 맨 하단의 영역.

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

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

---

1. Editor (Group)

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

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

1-1. Tabs

• 현재 열려있는 file들은 tabs에서 보임.
• Browser View의 상단의 OPEN EDITORS에 보여지는 list 와 같은 item으로 구성됨.
• Hotkeys (comma와  plus기호는 누르는거 아님.)
  • ctrl + pageup or ctrl + pagedown : 현재 그룹내 열린 파일들간 이동.  
    • ctrl + tap or ctrl + shift + tap : 비슷한 동작에 해당함 (macOS에서는 control).
  • ctrl(or cmd) + 1 : activate leftmost group (번호는 가장 왼쪽이 1이고 오른쪽으로 갈수록 하나씩 증가.)
    • 만약 분리되어 보이는 group이 없는 경우 창이 분리되면서 그룹이 생김.
    • Windows와 달리, macOS에서는 control + 1 은 현재 그룹의 가장 leftmost editor를 활성화 한다.
  • ctrl(or cmd) + k, w : close all tabs in current group. 
    • View: Close All Editors in Group 이라는 명령어로도 가능함.
  • ctrl(or cmd) + k, ctrl(or cmd) + w : close all tabs
    • View: Close All Editors
  • ctrl(or cmd) + w : close tab.
  • cmd + \ : (or ctrl + \) : split editor. 새로운 group이 추가됨.

1-2. Breadcrumbs

• 현재 activated file의 위치(path of 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 [ : 선택된 블럭 또는 현재 행을 들여쓰기 수행.
• cmd + / 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): 실행취소 다시 수행 (vim extension과 궁합이 안맞음)

---

2. Explorer

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

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

---

3. Command Palette

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

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

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

command 검색 기능으로 활용하려면
입력창의 입력 문자열이 >로 시작해야 함.
즉, cmd + p 로 하고 나서 앞에 > 을 입력하는 방식으로 사용가능.

---

Z. 그 외 많이 사용되는 Hotkeys

Windows에선
cmd 를 ctrl 로 대체.

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

ctrl + g : 특정 라인으로 이동. 해당 단축키를 누르면 이동할 라인번호를 입력할 수 있음 (macOS에선 안됨.)

• macOS에서 cmd + p 를 이용한 후 창에 colon과 함께 이동한 라인번호를 입력하는 것을 권함.

ctrl(or contrl) + tab : 현재 Group의 Editor들을 이동(활성화)할 수 있음.

• macOS에서도 control 인 점을 주의할 것!

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

ctrl(or cmd) + shift + p : command palette를 연다 (Peflexity 단축키와 충돌.).

ctrl(or cmd) + , : settings를 연다.

ctrl (or cmd) + ` : panel에서 terminal을 연다. `는 backtick임.

 

---

같이보면 좋은 자료들

User interface

User interface

 

2024.09.19 - [Mac] - [macOS] fn키 표준으로 동작하게 설정

[macOS] fn키 표준으로 동작하게 설정

 

2025.01.17 - [utils] - [summary] vscode

[summary] vscode

---