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

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

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

multi-cursor나 블럭 복사 등의 기능을 vscode도 지원하지만,
vim extension으로 사용하는 경우엔 이들 기능을 vim의 단축키로 대체하기 때문에 잘 사용하지 않게 된다. 

vscode의 기능으로 익혀도 좋지만, vim extension을 개인적으로 선호하고 추천한다.
실제로 장비에 vscode가 없는 경우도 많고, vim editor를 익혀두는게 프로그래머에겐 좋은 일인지라,
평소 연습을 위해서라도 vim extension을 꼭 설치하여 익혀두는 것을 권함.

 

이 문서에서는 vscode의 블록 복사나 multi-cursor 입력은 다루지 않는다.

 

https://dsaint31.tistory.com/473

[Linux] vi (or vim) 사용법 정리

2025.02.21 - [개발환경] - [vscode] vim extension

[vscode] vim extension

---

---

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(or cmd) + shift + e 단축키로 activation 됨.
  • Explorer가 활성화된 상태에서 다시 해당 hot key를 누르면, editor가 활성화됨.
  • Primary Sidebar를 toggle 시키는 단축키도 유용함:  ctrl (or cmd) + B
• 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 + tab or ctrl + shift + tab : 현재 group 내 열린 파일들간 이동 (windows와 macOS모두).  
    
    • 검색창에 드롭다운 리스트로 현재 group의 파일들이 보이며 이동.
    • 왼쪽 또는 오른쪽으로 이동 / 최근 사용한 순서 기준으로 이동.
  • alt( or ctrl) + 숫자 : (그룹 내 이동) **
    • 현재 활성화된 group(그룹) 내에서 숫자에 해당하는 tab이 활성화됨.
    • 번호는 가장 왼쪽이 1이고 같은 그룹 내에서 오른쪽으로 갈수록 하나씩 증가.
  • ctrl(or cmd)+ 숫자 : (그룹 이동 및 생성) ** 
    • activate group (번호는 가장 왼쪽이 1이고 오른쪽으로 갈수록 하나씩 증가.)
    • 참고로 1이 아닌 다른 번호를 입력할 때,
      • 해당하는 번호의 group이 없는 경우, 창이 분리되면서 그룹이 생김.
      • 해당하는 번호의 gropu이 있는 경우, 해당 그룹이 활성화(activate)됨.
  • ctrl(or cmd) + k, w : close all tabs in current group. 
    • View: Close All Editors in Group 이라는 명령어 입력과 같은 효과.
    • comma , 는 연달아 입력함을 의미함.
    • w를 누를 때, ctrl (or cmd)는 눌러지지 않아야 함 (눌러져 있을 경우 전체 그룹이 다 닫힘, 아래 참고)
  • ctrl(or cmd) + k, ctrl(or cmd) + w : close all tabs
    • View: Close All Editors 라는 명령어 입력과 같은 효과.
    • comma , 는 연달아 입력함을 의미함.
  • ctrl(or cmd) + w : close tab. ***
  • ctrl(or cmd) + \ : 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 관련)

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

multi-selection라는 강력한 기능도 제공함(vim extension을 사용하면서 아쉬운 기능 중 하나)

---

2. Explorer

프로젝트 루트 디렉토리 밑을 Explorer로 보여줌: ctrl (or cmd) + shift + e

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

macOS에선 Finder 스타일을 따르기 때문에,

• Enter는 파일명 변경을 위한 단축키 (Windows는 f2)이고,
• cmd + ↓ 가 현재 explorer에서 선택된 파일을 여는 단축키(Windows는 엔터)임: 현재 group에 새로운 tab만들어짐
• space는 preview로 현재 에디터 창에서 보임 (새로운 tab이 안 만들어짐)

---

3. Command Palette ***

vscode를 command로 제어할 때 사용되는 입력창 (상단 중앙의 검색창과 같은 위치).

화면 상단의 중앙에서 보여지는 input text field 임: perplexity 의 단축키와 충돌

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

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

---

Z. 그 외 많이 사용되는 Hotkeys

Windows에선
cmd 를 ctrl 로 대체.

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

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

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

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

• macOS에서도 ctrl (컨트롤) 키 인 점을 주의할 것!

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

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

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

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

 

cheatsheet (pdf)는 다음 url에서 다운로드 가능 (macOS, linux, Windows.)

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

 

---

같이보면 좋은 자료들

User interface

User interface

 

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

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

 

https://youtu.be/EVxCdenPbFs?si=2CFM31EDEsLtdTjY

---

2025.01.17 - [utils] - [summary] vscode

[summary] vscode

---