VSCode 커서 여러 개 선택하기, 멀티 커서

코드 강의를 보다가 선생님이 갑자기 커서를 여러 개 설정하고 한 번에 코드를 치는 모습에 당황하신 적 있으시죠? 멀티 커서의 존재를 알고 나면 선생님처럼 빠르게 코딩이 가능합니다. 반복되는 부분이 많을 때 사용하기 좋은 기능이에요. 

 

VSCode 멀티 커서, Alt + Shift

wrapping selection

일반적으로 좌클릭을 하고, 코드 선택을 할 때 Wrapping selection이 됩니다. 위 그림처럼 클릭한 부분부터 현재 있는 커서까지 전체 줄이 선택됩니다. 이 상태에서 "expense-date" 부분을 그냥 "date"로 클래스 이름을 바꾸려면 하나하나 클릭해서 바꿔줘야 합니다. 클릭 버튼을 계속 누른 상태에서 alt+shift 버튼을 누르고 움직이면 wrapping selection에서 box selection으로 선택이 바뀝니다. 

box selection

위 사진처럼 wrapping 되었던 부분이 깔끔하게 box 단위로 선택이 되는 걸 볼 수 있습니다. 이때 date, e에서 커서가 모두 선택되는데, 이 상태에서 백스페이스를 누르면 expense-date가 삭제됩니다. 

 

multi cursor

VSCode 커서 추가, Alt+Click

커서를 선택해서 추가하고 싶다면 alt+Click 하면 됩니다. 

add a cursor

위 그림처럼 일직선으로 커서를 추가하고 싶으면 Ctrl+Alt+위/아래 화살표를 눌러주면 키보드에 손을 얹고 편하게 여러 개의 커서를 선택할 수 있습니다. Ctrl+alt+위 방향키를 클릭하면 위쪽에 새로운 커서를 추가해주고, Ctrl+alt+아래 방향키를 클릭하면 아래쪽으로 커서가 추가됩니다. 

 

VSCode 모든 단어 바꾸기, Cltr+Shift+L

모두 선택해서 바꿈

VSCode에서 모든 단어를 한 번에 바꾸고 싶으면 Ctrl+Shift+L을 누르면 됩니다. 위에 예시처럼 저는 "expense_date를 선택하고, Ctrl+shift+L을 눌러 expense 부분만 남기고 수정했습니다. 같은 단어가 많은 코드에서 사용하면 좋은 스킬입니다. 

 

VSCode 단어 선택, Ctrl + D

단어 선택

className 같은 단어 길이가 긴 변수를 드래그할 때, c 앞에 커서를 두고, Ctrl+ D를 누르면 className이 선택됩니다. background 같은 긴 단어를 드래그 없이 선택하고 싶을 때 사용하기 좋은 단축키입니다. 이 상태에서 위에서 익힌 Ctrl + Alt+ 아래 방향키를 눌러주면 아래 className을 선택할 수 있어요. 

 

VSCode shrink/expand selection, Shift+ Alt+ Left/Right key

VSCode shrink/expand selection, Shift+ Alt+ Left/Right key

빠르게 지금 선택한 부분을 확장하고 싶거나 줄이고 싶을 때 Shift+Alt+좌/우 방향키를 눌러주면 쉽게 확장/축소가 가능합니다. 저는 위 그림에서 연두색 부분에 커서를 두고, Shift+Alt+우 방향키로 확장했는데요, 오른쪽 방향키를 몇 번 눌러주면 저렇게 넓은 범위도 쉽게 선택이 가능합니다. 

 

VSCode 멀티 커서 정리

지금까지 여러 줄을 동시에 선택하는 VSCode 멀티 커서에 대해서 알아봤는데요, 아래 표에 단축키와 사용 방법을 정리했습니다. 익숙해지면 게임 스킬처럼 자유자재로 편집기에서 자유롭게 코딩을 즐기실 수 있을 거예요. 

 

단축키	내용
Alt+Shift+드래그	box selection, 상자 모양으로 선택
Alt+클릭	원하는 곳에 커서 추가
Ctrl +Alt+ 위/아래 방향키	현재 커서에서 위, 아래에 커서를 추가
Ctrl+Shift+L	모든 단어 바꿈
Ctrl+D	단어 선택
Shift+Alt+좌/우 방향키	확장/축소 선택

 

더욱 자세한 내용이 알고 싶다면 VSCode 사이트에서 Basic Editing 포스팅을 보거나, 간단하게 실습하고 싶다면 VSCode에서 Help> Editor Playground에서 코드를 실습해볼 수 있습니다. 참고하세요:)