useCodeusecode logo

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

March 15, 2018

Paper

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

shrink expand selection

다중 커서 셀렉션

  • Mac: opt+cmd+up 또는 opt+cmd+down
  • Windows: ctrl+alt+up 또는 ctrl+alt+down
  • Linux: alt+shift+up 또는 alt+shift+down

editing evolved multi cursor

컬럼(박스) 셀렉션

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

column selection

셀렉션 위/아래로 복사

  • Mac: opt+shift+up 또는 opt+shift+down
  • Windows / Linux: shift+alt+down 또는 shift+alt+up

copy line down

셀렉션 위/아래로 이동

  • Mac: opt+up 또는 opt+down
  • Windows / Linux: alt+up 또는 alt+down

move line

셀렉션 되돌리기

  • Mac: cmd+u
  • Windows / Linux: ctrl+u

undo cursor position

심볼 이름 변경

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

rename symbol

모든 심볼 찾기

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

find all references

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

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

local scope selection

터미널 화면 분할

  • cmd + \ (또는 컨텍스트 메뉴에서 선택)
  • 터미널 사이즈 작게: ⌃⌘↓
  • 터미널 사이즈 크게: ⌃⌘↑
  • 터미널 사이즈 왼쪽으로 크게: ⌃⌘←
  • 터미널 사이즈 오른쪽으로 크게: ⌃⌘→

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

terminal split

터미널에서 링크 클릭하기

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

terminal link

References

https://code.visualstudio.com/docs/getstarted/tips-and-tricks