VSCode 입문하기 - 익스텐션과 단축키 19.07.13
웹 트렌드가 빠르게 변하듯 에디터도 변하는데요. 이제는 VSCode가 압도적인 점유율을 자랑하면서 많은 개발자들에게 사랑받고 있습니다. 저도 Sublime을 쓰다가 VSCode로 넘어와 정착하게 되었는데요. 5년간 사용한 에디터를 바꾸는 일은 쉽지 않았습니다. 혹시 저처럼 VSCode에 입문하신다면 처음에 알면 좋은 익스텐션과 단축키를 공유합니다.
익스텐션
수많은 익스텐션과 호환성은 VSCode의 최고의 장점이라고 할 수 있는데요. 제가 추천하는 익스텐션은 다음과 같습니다.
- Visual Studio Intellicode - 마이크로소프트에서 개발한 코드 자동완성 및 추천 기능. 베타
- Path Intellisense - 경로 자동완성 기능
- IntelliSense for CSS class names in HTML - CSS 클래스명 자동 완성 기능
- Git Lens - Git을 VSCode에서 쉽게 관리할 수 있는 익스텐션
- Active File In StatusBar - 에디터 하단에 파일 관련 정보 확인가능
- EditorConfig for VS Code - .editcofing를 적용할 수 있는 익스텐션
- ESLint - ESLint를 VSCode에서 해주는 익스텐션
- Prettier - 코드 정렬해주는 익스텐션
- Auto Rename Tag - 열림 태그를 수정하면 닫힘 태그도 같이 수정되는 기능
- expand-region - ctrl + w로 선택 영역을 넓히면서 제어
- open in browser - alt + b로 크롬 열기 가능
- Settings Sync - gist를 이용해 다른 컴퓨터에서 같은 설정으로 동기화
- SFTP - ftp 익스텐션
- Material Theme - 에디터 마테리얼 테마
- vscode-icons - 파일 옆 아이콘 추가
- Debugger for Chrome - 구글 크롬과 통합된 디버깅 환경을 제공하는 익스텐션
- ES7 React/Redux/GraphQL/React-Native snippets - 리액트 코드 스니펫
- React Native Tools - 리액트 네이티브 스니펫, 디버깅
- Vetur - Vue 스니펫, emmet 제공
단축키 (맥 기준)
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.stateNameest
- this.state = {}props
- this.props.propNamebnd
- this.methodName = this.methodName.bind(this)sst
- this.setState({ })cp
- const { } = this.propscs
- const { } = this.stateimp
- importexp
- exportrafcp
- functional component with props typesrccp
- class component with props typesrcreduxp
- redux component with prop typesrconst
- constructor(props) with this.state- ts만 앞에 붙이면 typescript 전용으로 사용할 수 있습니다.