DEV ENJOY🌊

적절한 단축키 사용은 효율 상승은 물론이고 휴먼 에러도 줄여준다. 초반에 적응을 위한 노력이 필요하지만, 익숙해지면 개발이 훨씬 즐거워진다. 나의 개발 생활을 한 층 윤택하게 해준 단축키들을 정리해보았다.

• Default: VScode 기본 단축키
• User: 내가 지정한 단축키

---

Users Shortcuts

VS Code에 default 단축키 설정이 되어있지 않아 유저가 직접 단축키를 설정해야하는 커맨드들이다.

선택 영역 태그로 감싸기

영역 선택 후 해당 커맨드 실행하면 상단에 태그 입력창이 노출된다. 원하는 태그 입력 후 엔터를 누르면 해당 태그로 선택 영역이 감싸진다.

Emmet : Wrap with Abbreviation - docs

Default   :   null
User      :   Ctrl + Shift + A

태그 제거

Emmet: Remove Tag

Default :  null
User    :  Ctrl + Shift + K

짝꿍 태그로 이동

Emmet: Go to Matching Pair

Default :  null
User    :  Ctrl + Shift + T

태그 내부 선택

누를수록 선택 영역 확장

Emmet: Balance (outward)

Default :  null
User    :  Ctrl + Alt + A

여러줄을 한줄로 병합

Emmet: Merge Lines

Default :  null
User    :  Ctrl + Alt + E

이전/다음 편집점으로 이동

편집점은 따옴표 사이, 태그 내부 등이 비어있는 곳을 말한다.

Emmet: Go to Next Edit Point / Go to Previous Edit Point

Default :  null
User    :  Ctrl + .  /  Ctrl + ,

---

vscode-input-sequence (extension)

연속된 숫자 자동 입력

정말 유용하게 잘 쓰고 있는 키보드이다. 특히 스크립트 분석 할때, 어디가 실행된건지 어디가 문제인지 찾고 싶을때, 특정 함수명 일괄 선택 후 하단에 console.log() 삽입해서 괄호에 연속된 숫자 입력하고 콘솔창에 찍힌 숫자를 확인하면 된다.

Insert Sequential number

User    :  Ctrl + Alt + 0

---

Quick Select (extension)

따옴표 및 괄호 내부를 선택 커맨드를 제공한다.

따옴표 내부 선택

두번 실행하면 따옴표까지 선택한다.

Quick Select : Select inside either quote

Default :  Ctrl + K ;
User    :  Ctrl + Shift + '

괄호 내부 선택

두번 실행하면 괄호까지 선택한다.

Quick Select : Select inside parenthesis

Default :  Ctrl + K Shift + 9
User    :  Ctrl + Shift + 9

대괄호 내부 선택

두번 실행하면 대괄호까지 선택한다.

Quick Select : Select inside square brackets

Default :  Ctrl + K [
User    :  Ctrl + Shift + [

중괄호 내부 선택

두번 실행하면 중괄호까지 선택한다.

Quick Select : Select inside curly brackets

Default :  Ctrl + K Shift + [
User    :  Ctrl + Alt + [

---

---

View

작업 창과 관련된 단축키이다.

창 분할

View : Split Editor

Default :  Ctrl + \

분할 창 사이즈 리셋

View : Reset Editor Group Sizes

Default :  null
User    :  Ctrl + Alt + \

활성 창 사이즈 늘리기 토글

View : Toggle Editor Group Sizes

Default :  null
User    :  Ctrl + Alt + ]

모든 창 닫기

View : Close All Editors

Default :  Ctrl + K W

Default Shortcuts

VS Code에 기본으로 설정되어있는 단축키이다.

하단 라인에 커서 추가

cursorColumnSelectDown

Default :  Ctrl + Shift + Alt + DownArrow
User    :  Shift + Alt + DownArrow

라인 가장 앞 / 끝으로 커서 이동

VS Code의 word wrap설정이 on으로 되어있는 경우 긴 라인은 자동으로 줄이 바뀌어 보이는데, 이때 Go Forward를 한번만 실행하면 보이는 라인의 끝으로 이동하고, 한번 더 실행해야 실제 라인의 끝으로 커서가 이동한다. 반대도 마찬가지이다.

Go Back / Go Forward

Default :  Alt + LeftArrow / RightArrow

커서 위치 하단에 공백 라인 추가

Insert Line Below

Default :  Ctrl + Enter

현재 라인 복사하여 하단에 추가

Copy Line Down

Default :  Shift + Alt + DownArrow
User    :  Ctrl + D

코드 모두 접기 / 펼치기

Fold / Unfold All

Default :  Ctrl + K Ctrl + 0 / Ctrl + K Ctrl + J
User    :  Alt + 1 / Alt + Ctrl + 1

선택한 부분만 코드 접기 / 펼치기

Fold / Unfold Recursively

Default :  Ctrl + K  Ctrl + [ / Ctrl + K  Ctrl + ]

파일 언어 설정

잠깐 빈 창에 소스 붙여놓고 확인할 때 유용하다.

Change Language Mode

Default :  Ctrl + K M
User    :  Ctrl + Alt + Q

선택된 내용과 동일한 내용 모두 선택

Search Editor: Select All Matches

Default :  Ctrl + Shift + L

선택한 내용과 같은 내용 추가 선택

Add Selection To Insert Find Match

Default :  Ctrl + D
User    :  Ctrl + Shift + C

괄호(소,중,대) 짝꿍에게 커서 이동

Go to Bracket

Default :  Ctrl + D
User    :  Ctrl + Shift + C

---

번외: 브라우저 단축키

브라우저 캐시 삭제

Ctrl + Shift + L

시크릿 모드

Ctrl + Shift + N

개발자 도구 - 조사할 엘리먼트 선택

Ctrl + Shift + C

방금 종료한 창 다시 열기

Ctrl + Shift + T