tsryu,dev

VSCode 입문하기 - 익스텐션과 단축키 19.07.13

웹 트렌드가 빠르게 변하듯 에디터도 변하는데요. 이제는 VSCode가 압도적인 점유율을 자랑하면서 많은 개발자들에게 사랑받고 있습니다. 저도 Sublime을 쓰다가 VSCode로 넘어와 정착하게 되었는데요. 5년간 사용한 에디터를 바꾸는 일은 쉽지 않았습니다. 혹시 저처럼 VSCode에 입문하신다면 처음에 알면 좋은 익스텐션과 단축키를 공유합니다.

VSCode의 압도적인 점유율 출처 - State Of JavaScript 2018

익스텐션

수많은 익스텐션과 호환성은 VSCode의 최고의 장점이라고 할 수 있는데요. 제가 추천하는 익스텐션은 다음과 같습니다.

단축키 (맥 기준)

VSCode를 막 쓰기 시작했다면 단축키가 익숙하지 않을텐데요. 그런 경우 Code(파일) > 기본설정 > 키맵에서 키매핑 익스텐션을 설치해서 사용해보세요. 예를 들어 서브라임 키맵 세팅을 설치하면 서브라임과 같은 단축키로 사용할 수 있습니다.

이동

  • 작업 영역 이동 - ctrl + r
  • 파일 이동 - ctrl + p

  • 탭 이동

    • 파일 탭 단축키 - cmd +shift + e
    • 검색 탭 단축키 - cmd + shift + f
    • 깃 탭 단축키 - ctrl + shift + g
    • 디버그 탭 단축키 - cmd + shift + d
    • 익스텐션 탭 단축키 - cmd + shift + x
  • 줄 번호 이동 - ctrl + g

편집

  • 줄 위치 변경 - alt + 방향키
  • 줄 복제 - shift + alt + down
  • 탭 재정렬 (reindent) - alt + shift + f
  • 함수, 클래스명 일괄 변경 - f2
  • 함수, 클래스명 리스트업하기 - shift + f12

선택

  • 선택된 문자 중복 선택 - cmd + d
  • 선택된 문자 전체 선택 - cmd + shift + l
  • 현재 줄 선택 - cmd + l

  • 선택한 줄 마지막에 커서 추가 - alt + shift + i

    • 줄 처음으로 이동 - fn + ←

터미널

  • 터미널 열기 - cmd + `
  • 터미널 분할 - cmd + \
  • 터미널에서 링크 클릭하기 - cmd + 마우스클릭

기타

  • 창 전체화면 - cmd + ctrl + f
  • 창 최소화 - cmd + m
  • 세팅 열기 - cmd + ,
  • 언어 모드 바꾸기 - cmd + k, m

커스텀 단축키

  • 기본 단축키로 부족한 부분은 Code(파일) > 기본 설정 > 바로가기 키 > keybindings.json에 커스텀 단축키를 추가해 사용할 수 있습니다.
 // Place your key bindings in this file to overwrite the defaults
 [
  // 확장 선택
  {
    "key": "ctrl+w",
    "command": "expand_region", 
    "when": "editorTextFocus"
  },
  // 확장 선택 취소
  {
      "key": "ctrl+shift+w",
      "command": "undo_expand_region", 
      "when": "editorTextFocus && editorHasSelection"
  },
  // 태그 감싸기
  { 
    "key": "ctrl+alt+r",   
    "command": "editor.emmet.action.wrapWithAbbreviation" 
  },
  // 작업 영역 다른이름으로 저장하기
  {
    "key": "ctrl+cmd+s",
    "command": "workbench.action.saveWorkspaceAs"
  },
  // 에디터 단일 레이아웃
  {
    "key": "alt+cmd+1",
    "command": "workbench.action.editorLayoutSingle"
  },
  // 에디터 단 추가
  {
    "key": "alt+cmd+2",
    "command": "workbench.action.splitEditorRight"
  },
  // 오른쪽 탭 닫기
  {
    "key": "alt+shift+r",
    "command": "workbench.action.closeEditorsToTheRight"
  },
  // git push
  {
    "key": "ctrl+alt+p",
    "command": "git.push"
  }
]

React snippets 단축키

ES7 React/Redux/GraphQL/React-Native snippets

  • state - this.state.stateName
  • est - this.state = {}
  • props - this.props.propName
  • bnd - this.methodName = this.methodName.bind(this)
  • sst - this.setState({ })
  • cp - const { } = this.props
  • cs - const { } = this.state
  • imp - import
  • exp - export
  • rafcp - functional component with props types
  • rccp - class component with props types
  • rcreduxp - redux component with prop types
  • rconst - constructor(props) with this.state
  • ts만 앞에 붙이면 typescript 전용으로 사용할 수 있습니다.

참고

목록으로