개발 생산성을 올려주는 VSCode의 소소(?)한 기능들

VS Code에는 다양한 기능이 기본으로 내장되어 있다. Command Palette, Intelligence, 강력한 디버깅 기능과 다양한 익스텐션 등등. 하지만 이런 기능 외에도 우리의 생산성을 높여주는 다양한 소소(?)한 기능 역시 많은데, 유용하게 사용 될 만한 기능을 추려보았다.

참고: 기능의 대한 설명은 대부분 VSCode tips and tricks와 VSCode 공식문서, 업데이트 소식에 있는 GIF로 대체 했다. 아래의 리스트 말고도 공식문서를 천천히 보다보면 몰랐던 기능들을 발견 할 수 있으니, 시간이 된다면 공식문서를 천천히 확인해보는 것을 추천한다!

​

셀렉션 축소 확장

Mac: ctrl+shift+cmd+left 또는 ctrl+shift+cmd+right

Windows / Linux: shift+alt+left 또는 shift+alt+right

 

다중 커서 셀렉션

Mac: opt+cmd+up 또는 opt+cmd+down

Windows: ctrl+alt+up 또는 ctrl+alt+down

Linux: alt+shift+up 또는 alt+shift+down

 

컬럼(박스) 셀렉션

커서를 원하는 곳에 위치 시켜 놓고 shift + alt를 누른채로 드래깅을 하면 박스 형태로 셀렉션이 된다.

 

셀렉션 위/아래로 복사

Mac: opt+shift+up 또는 opt+shift+down

Windows / Linux: shift+alt+down 또는 shift+alt+up

 

셀렉션 위/아래로 이동

Mac: opt+up 또는 opt+down

Windows / Linux: alt+up 또는 alt+down

 

셀렉션 되돌리기

Mac: cmd+u

Windows / Linux: ctrl+u

 

심볼 이름 변경

개발을 하다 보면 심볼(함수/클래스 등)명을 바꾸는 일을 수도 없이 하게 된다. 심볼이 여러곳/여러파일에서 사용 된다면 일일이 찾아서 바꾸거나 전체찾기에서 같은 이름을 변경하거나 할텐데, 이렇게 변경하다 보면 항상 실수하게 되거나 전체를 한번에 바꿀 수 없는 경우가 생기게 된다(예를들어, 함수 이름은 같은데, 기능이 다른 경우). 하지만, VSCode에서 변경하고 싶은 심볼(함수/클래스 등등)을 선택해서 F2 키를 눌러주면 바로 아래에 입력창이 뜨고 거기에 변경하고 싶은 이름을 적고 엔터를 눌러주면 그 파일 또는 전체파일(몇몇 언어만 지원)의 모든 이름을 바꿔준다.

 

모든 심볼 찾기

shift+f12(또는 컨텍스트 메뉴)를 누르면 모든 심볼을 찾아서 리스트화 해준다.

 

자바스크립트/타입스크립트의 값을 스코프안으로 추출

셀렉션으로 선택된 부분을 지역 스코프 안의 로컬 변수로 만들어준다.

 

터미널 화면 분할

cmd + \ (또는 컨텍스트 메뉴에서 선택)

터미널 사이즈 작게: ⌃⌘↓

터미널 사이즈 크게: ⌃⌘↑

터미널 사이즈 왼쪽으로 크게: ⌃⌘←

터미널 사이즈 오른쪽으로 크게: ⌃⌘→

이번 2018년 2월 릴리즈에서 새로 추가된 기능으로 터미널 화면을 분할 해준다.

 

터미널에서 링크 클릭 하기

cmd 키를 누른 상태로 클릭을 하면 링크가 브라우저에서 열린다.