VSCode 다중 편집을 위한 멀티 커서 활용법

요즘 어떤 프로그래밍 언어로 개발을 하든 코드 편집기로 VSCode를 참 많이 사용하는 것 같아요. 그런데 VSCode에서 마치 커서를 여러 곳에 둔 것처럼 동시에 편집할 수 있다는 것을 알고 계시나요? 잘 활용하면 여러분의 개발 생산성을 폭발시킬 수 있는 치트키와 같은 기능이죠!

이번 포스팅에서는 제가 VSCode에서 다중 편집을 위해서 즐겨 사용하는 멀티 커서 기능에 대해서 알려드리겠습니다.

멀티 커서 하나씩 추가하기

우선 멀터 커서를 사용하는 가장 기초적인 방법부터 알려드릴게요.

VSCode에서 아무 파일이나 하나 여시고 맥(Mac)에서는 Option 키, 윈도우즈에서는 Alt 키를 누르신 체로 편집기 화면에서 아무데나 원하는 곳을 마우스 포인터로 콕콕 클릭(click)해보세요. 그럼 마우스로 찍은 모든 곳에서 커서가 동시에 깜빡이는 놀라운 경험을 하시게 될 거에요. 💡

이 상태에서 키보드로 타이핑을 하시면 모든 커서에서 동일한 변경이 일어날 거에요.

멀터 커서를 제거하려면 어떻게 해야할까요? 아까 찍어둔 곳으로 다시 마우스 포인트를 옮긴 후에, Option 또는 Alt 키를 누르신 체로 다시 한 번 콕콕 클릭해주시면 됩니다.

어때요? 정말 간편하게 다중 편집이 가능하죠? 하지만 이 방법은 동시에 편집해야할 곳이 많을 때는 직접 마우스로 여기저기 콕콕 찍는 게 좀 번거로워질 수 있다는 단점이 있습니다.

멀티 커서 범위로 추가하기

다중 편집을 해야하는 부분이 한 곳에 몰려있다면 굳이 하나 씩 콕콕 찍지 않고 한 번에 쭈욱 마우스로 긁어서 멀티 커서를 범위로 잡을 수도 있어요.

맥에서는 Option+Shift 키, 윈도우즈에서는 Alt+Shift 키를 동시에 누르신 체로 편집기 화면에서 원하는 범위를 마우스 포인터로 드래그(drag)해보세요. 그러면 여러 행과 열이 박스(box)의 형태로 범위가 잡힐 거에요.

이 상태에서 키보드로 타이핑을 하시면 그 박스 안에서 일괄 변경이 일어나겠죠?

이제부터는 고수 답게 마우스를 쓰지 않고 순수하게 키보드만을 이용해서 멀티 커서를 제어하는 방법을 알려드릴께요.

일치하는 모든 텍스트를 선택하기

하나의 파일 내에서 반복되고 있는 텍스트를 모두 찾아서 일괄로 바꿔줘야 할 때가 있죠?

이 때는 VSCode의 찾아 바꾸기(Find and Replace) 기능을 쓸 수도 있지만 멀터 커서를 잡아서 더 쾌적하게 다중 편집을 할 수도 있어요.

우선 반복되고 있는 특정 텍스트를 마우스나 키보드를 이용해서 선택을 하세요. 그 다음, 맥에서는 Command+Shift+L 키, 윈도우즈에서는 Ctrl+Shift+L 키를 눌러 보세요. 그러면 해당 텍스트와 동일한 모든 텍스트가 선택이 되서, 여러 곳에서 동시에 멀터 커서에 깜빡일 겁니다.

이 상태에서 키보드로 타이핑을 하시면 선택된 곳을 한 번에 바꿀 수 있어요.

HTML을 작성할 때, 태그나 클래스를 일괄 변경하거나, 변수 이름을 일괄로 변경할 때 매우 편리하겠죠?

참고로 이 기능은 VSCode의 커맨드 팰리트에서 Select All Occurrences of Find Match로 찾으실 수 있습니다.

다음으로 일치하는 텍스트만 선택하기

때때로 선택된 텍스트와 일치하는 모든 텍스트를 바꾸고 싶지는 않고, 반복되는 몇 개의 텍스트만 바꿔주고 싶을 때가 있는데요. 그래서 VSCode는 좀 더 유연하게 일치하는 텍스트를 하나씩 멀티 커서로 추가해주는 방법도 제공하고 있습니다.

우선 반복되고 있는 특정 텍스트를 마우스나 키보드를 이용해서 선택을 하세요. 그 다음, 맥에서는 Command+D 키, 윈도우즈에서는 Ctrl+D 키를 눌러보세요. 그러면 해당 텍스트와 동일한 다음 텍스트가 선택되서 두 곳에서 커서가 깜빡일 거에요. 한 번 더 Command+D 또는 Ctrl+D 키를 누르시면 또 다음으로 일치하는 텍스트도 선택되서 세 곳에서 커서가 깜빡일 겁니다.

이 상태에서 키보드로 타이핑을 하시면 선택된 곳에서 동시에 편집을 할 수가 있습니다.

만약에 Command+D 또는 Ctrl+D 키를 막 누르시다가 실수로 원치 않는 곳이 선택되었다면 어떻게 해야할까요? 😮 이 때는 맥에서는 Command+U 키, 윈도우즈에서는 Ctrl+U 키를 눌러서 마지막으로 선택된 곳을 취소할 수 있습니다. 😁

참고로 이 기능은 VSCode의 커맨드 팰리트에서 Add Selection To Next Find Match를 찾아보시면 됩니다.

바로 위나 아래 줄을 멀터 커서 추가하기

CSV나 YAML, JSON 파일처럼 규칙적인 형태를 띠고 있는 여러 줄을 동시에 편집하고 싶을 때가 있죠? 이러한 편집 방법을 소위 “열편집”이라고 부르는데요.

현재 커서 위치에서 위 또는 아래 방향으로 멀터 커서를 연속으로 추가할 수 있습니다. 맥에서는 Command+Option+위/아래 방향키, 윈도우즈에서는 Ctrl+Alt+위/아래 방향키 키를 누르시면 됩니다.

이 상태에서 키보드로 타이핑을 하시면 여러 줄에 걸쳐서 한 번에 편집을 할 수 있게 됩니다.

참고로 이 기능은 VSCode의 커맨드 팰리트에서 Add Cursor Above나 Add Cursor Below로 찾으시면 됩니다.

여러 줄의 맨 마지막에 멀터 커서 추가하기

여러 줄의 맨 마지막에서 편집을 하고 싶은데, 각 줄의 텍스트 길이가 중구난방인 상황에서 어떻게 해야할까요?

이럴 때는 우선 편집이 필요한 여러 줄을 마우스나 키보드를 이용해서 선택을 하세요. 그 다음, 맥에서는 Option+Shift+I, 윈도우즈에서는 Alt+Shift+I를 키를 눌러보세요. 그러면 모든 줄의 가장 마지막에서 다수의 커서가 깜빡이는 것을 보실 수 있으실 거에요.

이 상태에서 키보드로 타이핑을 하시면 여러 줄의 맨 마지막에서 다중 편집을 할 수 있게 됩니다.

참고로 이 기능은 VSCode의 커맨드 팰리트에서 Add Cursors to Line Ends를 찾아보시면 됩니다.

작정하고 열 편집하기

참고로 작정하고 열편집을 하고 싶으시다면 VSCode의 커맨드 팰리트에서 Toggle Column Selection Mode를 찾아서 실행해주세요. 그러면 열편집 모드로 들가는데요. 이 모드에서는 텍스트 선택 자체가 열을 기준으로 되기 때문에 좀 더 자유롭게 여러 줄에 걸쳐서 편집을 할 수 있습니다. 열편집이 끝나셨다면 다시 커맨드 팰리트에서 Toggle Column Selection Mode를 찾아서 실행하시면 열편집 모드에서 빠져나오게 됩니다.

마치면서

지금까지 VSCode의 멀티 커서 기능을 활용하여 다중 편집이나 열 편집을 하는 다양한 방법에 대해서 배웠습니다. 본 포스팅에서 다룬 VSCode 팁을 잘 활용하셔서, 여러 분의 개발 생산성을 한 단계 업그레이드하실 수 있으셨으면 좋겠습니다.