깃헙에서 만든 아톰 에디터를 즐겨 사용했던 적이 있다. 무척 가볍고 서브라임과 비슷한 UI를 가지고 있어서 단순한 모습이 무척 맘에 들었다. 그러나 가끔 발생하는 CPU 100% 현상은 적잖케 불편했다. 그마다 프로그램을 재 실행 해야 했기 때문이다.

그런 시기에 VSCode가 나왔다. IDE 잘 만든다는 마이크로소프트에서 무료로 만든 것이라 호기심 있게 바라 보았다. 아톰과 병행으로 사용하다 이제는 메인 개발 도구로 사용하고 있다.

개인 프로젝트 뿐만 아니라 회사 업무에서도 VSCode를 사용하고 있는데 그렇게 큰 불편함은 없다. 그 동안 이것을 사용했던 경험과 부족한 부분을 해결한 노하우를 정리해 보자.

몇 가지 단축키를 손에 익히면 좋다.

모든 어플리케이션이 그렇듯, 단축키가 손에 익는 시점이 되면 생산성을 눈에 띄게 높일 수 있다. 마우스 없이 키보드 만으로 문서를 작성하는 Vim은 어찌보면 모든 것이 단축키인 셈인데, 익숙한 파워 유저의 작업 속도는 혀를 내두를 정도다.

VSCode는 마우스로 모든 기능을 사용할 수 있지만 그래도 단축키를 익히는 것이 좋다. 전문적으로 코딩을 하는 사람이라면 매번 마우스로 작업하는 것 보다 키보드를 사용하는 것이 효율적일 때가 많기 때문이다.

편집기에서 문서 작성

중앙에 위치한 편집기. 코드나 문서를 편집할 때 몇 가지 단축기를 알고 있으면 빠르게 작업할 수 있다.

문자를 편집하기 위해 선택할 때가 많은데 보통 문자나 단어 단위로 선택하는 것이 기본 기능이다. 우리가 작성한 코드는 블록 단위로 작성하게 되는데, VSCode의 단축키를 사용하면 블록 단위로 선택영역을 확장 혹은 축소할 수 있다.

control + shift + 오른쪽 화살표: 선택 영역 확장
control + shift + 왼쪽 화살표: 선택 영역 축소

블록의 시작과 끝 지점으로 빠르게 이동할 수 도 있다.

command + shift + \: 블록간 이동

블록을 접었다 펴는 것도 편리한 기능이다.

command + option + [: 블록 접기, 펴기
command + option + ]: 블록 펴기

코드를 선택하고 위, 아래로 이동하면 문맥에 따라 들여쓰기가 자동으로 적용된다.

option + 위 화살표: 선택 영역 위로 이동
option + 아래 화살표: 선택 영역 아래로 이동

리팩토링

최근 2년간 타입스크립트를 많이 사용하는데 이게 VSCode와 궁합이 좋다.

함수 이름이나 변수 이름을 바꾸는 일이 빈번한데 "이름 바꾸기 기능"을 사용하면 사용된 모든 심볼을 자동으로 바꿔준다.

F2: 심볼 이름 변경

심볼 정의 코드로 빠르게 이동하는 것도 가능하다.

F12: 심볼 정의로 이동

심볼을 사용한 레퍼런스도 금새 찾을 수 있다.

option + shift + F12: 심볼 레퍼런스 찾기

에디터 구성간의 이동

코드를 작성하는 편집기에서 파일 탐색기나 터미널간의 이동시 단축키로 빠르게 전환할 수 있다.

cmd + 0: 탐색기 포커스 (편집기에서 선택한 파일로 이동)
cmd + 1: 편집기 포커스
control + `: 터미널 포커스
cmd + shift + .: 브레드크럼 포커스

네비게이션

파일명을 "잘" 지었다면 파일 탐색기까지 갈 필요없이 곧장 해당 파일로 이동할 수 있다.

cmd + p: 파일 바로가기

파일이 생각 나지 않고 심볼만 기억 날때는 심볼로 바로 이동하는게 더 빠르다.

cmd + t: 심볼 바로가기

전체 프로젝트가 아니라 편집 중인 파일 안에서 심볼을 찾으려면 이렇게 하자.

cmd + shift + o: 파일내 심볼 바로가기

파일이 아니라 VSCode의 모든 명령어를 볼 수도 있다.

cmd + shift + p: 모든 명령어 표시

직접 해보면 알겠지만 >나 @나 # 기호로 명령어에 접근 할 수도 있다.

그럼에도 불편한게 있다. 익스텐션을 사용하자!

웬만하면 사용하는 소프트웨어의 기본 기능만을 활용하는 편인데 그럼에도 불구하고 몇 가지 아쉬운 점이 있다.

아이콘 테마

VSCode의 파일 탐색기는 눈에 잘 안들어 온다. 줄 맞춤이 원인이라고 생각한다.

폴더 안의 내용물을 표시할 때는 좀 더 들여서 보는 것이 익숙한데 이것은 그렇지 않다. 그래서 파일의 위치를 파악하는데 직관적이지 못하다.

VSCode는 "확장도구"를 이용해 에디터의 다양한 기능을 추가할수 있도록하는데, 파일 탐색기의 테마를 바꾸는 확장도구는 무척 많다.

그중에 file-icon을 먼저 쓰다가 최근에는 material-icon를 사용한다. 딱히 더 좋은건 아니지만 사용자가 많아서 후자로 바꿨다.

소스 제어

"소스제어"란 이름으로 왼쪽 세번 째 탭을 선택하면 Git 따위의 소스 트레킹 도구를 제공한다. 간단히 커밋 하기에는 충분하지만 히스토리를 보려면 외부 도구의 도움이 필요하다. 이 점은 인텔리제이가 월등하다.

처음엔 VSCode를 메인으로 사용하다가 변경 이력을 볼때는 인텔리제이를 켰는데, 이게 뭐하는건가 싶더라. 차라리 그럴거면 인텔리제이를 쓰지. 배보다 배꼽이 더 큰 셈이다.

나와 비슷하게 VSCode로 개발하는 직장 동료로 부터 GitLense란 확장 도구를 소개받게 되었다.

설치하면 에디터 좌측에 GitLense 탭이 하나 더 생긴다. 저장소의 깃 히스토리 조회를 기본으로 특정 파일 및 라인의 변경 이력도 조회할 수 있어서 불편함을 해결할 수 있었다. 뿐만 아니라 에디터 상에서 라인별로 최근 커밋 정보를 볼수 있는 점(blame 이라고 한다)은 무척 인상적이다.

"블라인드 코드 리딩"을 지향한다. 누가 작성했는지 모른 상태에서 코드 자체만 읽고 싶지만 이게 잘 안된다. 작성자를 알고 있는 상태에서 코드를 읽으면... 느낌이 좀 다르다.

그래서 보통은 GitLense의 블래임 기능은 꺼두고 사용하는 편이다. 코드를 읽다가 도통 의도를 모르겠거나 조심스럽게 타인이 작성한 코드를 리팩토링 해야 할 때만 블래임 기능을 활용한다.

북마크

Bookmarks. 코드리딩 할 때 군데군데 표시해 두면 기억하기에 좋다. 코드를 읽을때 기억력으로만 한계일 때가 있는데 적절한 위치에 북마크를 해 놓으면 프로그램을 좀 더 수월하게 파악할 수 있었다.

북마크 확장도구를 설치하면 좌측에 북마크 탭이 생겨서 표시해둔 목록을 조회할 수 있다. 편집기 안에서 단축키를 사용하면 훨씬 빠르게 표시해둔 부분으로 이동할 수 있다.

cmd + option + k: 북마크 표시/해제
cmd + option + j: 이전 북마크로 이동
cmd + option + l: 다음 북마크로 이동

터미널을 자주 사용한다면 이렇게 써보자.

VSCode의 내장 터미널은 무척 훌륭하다. 인텔리제이의 내장 터미널 아쉬운 점이 바로가기 단축기가 손에 익지 않는다는 것과 한글 표기의 부족함이다. 그에 비하면 VSCode의 그것은 뭐 나무랄 것이 없다.

그렇지만 역시 별도 터미널을 사용하는 것이 더 편하다. 여러개 터미널 탭을 열어 두고 작업하거나 터미널 화면을 크게한 뒤 빠르게 전환하면서 작업하기에는 내장 터미널만으로 부족하기 때문다.

VSCode에서 터미널을 실행

VSCode에서 작업하는 프로젝트를 외부 터미널로 열려면 직접 경로 이동을 해야한다. 그런데 최근에 발견한 이 단축키는 이런 가려운 부분을 시원하게 긁어 주었다.

cmd + shift + c: 외부 터미널 열기

현재 작업중인 프로젝트의 경로로 외부 터미널을 실행한다. 무척 편하다. 타이핑을 적게하니깐.

이 단축키는 운영체제에 세팅한 기본 터미널을 실행하는데, 특정 어플리케이션으로 변경할 수도 있다. Settings > Termianl > External에 해당 어플리케이션 이름을 지정하면 된다.

터미널에서 VSCode를 실행

터미널에서 작업을 하다가 에디터를 열어야 하는 경우도 흔하다. VSCode를 열고 해당 프로젝트를 열람하는 것이 기본적인 방법이겠지만 이것도 좀 불편한게 사실이다.

VSCode 터미널 명령어를 사용하는 방법이 있다.

cmd + shift + p 전체 명령어 목록을 열고, "Shell 명령: PATH에 'code' 명령 설치" 메뉴를 실행한다. 그러면 VSCode를 실행하는 code 명령어가 기본 경로에 추가된다.

이제 code [경로] 형식으로 명령어를 사용해서 VSCode를 열 수 있다.

결론

뭔가 노하우가 있을것 같았는데 결국에는 1) 자주 사용하는 단축키를 몸에 익히고, 2) 적절한 확장 도구를 사용하는 내용이 되었다. 여기서 설명한 단축키 외에 VSCode의 모든 단축키를 찾으려면 이것만 기억하자.

cmd + k + s: 단축키 포탈

1, 2년 마다 사용하는 도구를 바꾸는 습관이 있는데 이게 어찌보면 쉽게 질려하는 것 같기도하고 호기심이 있는것 같기도 하다. 일이 지루하거나 분위기를 환기시킬 목적이라면 지금 손에 익은 도구를 잠시 놓고 다른 도구를 짚어 보는 것도 방법이 아닐까 싶다.