[VSCode] 코딩 단축키

 

 

이 글에 있는 단축키와 기능을 사용하면 VS Code로 코딩할 때 생산성과 효율성을 올릴 수 있다.

 

 

0. Shortcuts

 

이거 알면 마우스 없이 키보드로만 코딩 가능.

 

코드 한줄 선택 → Ctrl+L

같은 코드 모두 선택 → Ctrl+D

 

코드 밑으로 내리기(or 올리기) → Alt+↓(↑) (여러 줄도 가능)

행 복사 → Shift+Alt+↓

 

코드 간 커서 이동 → Ctrl+→

코드 맨 위로 이동하기 → Ctrl+Home (Mac은 Ctrl+↑)

 

들여쓰기 (우측으로) → Tab

내어쓰기 (좌측으로) → Shift+Tab

 

주석 처리 → Ctrl+/

다른 파일로 이동 → Ctrl+P

터미널 켜기 → Ctrl+`(~)

사이드바 숨기기(열기) → Ctrl+B

 

* Mac은 Ctrl 대신 Command 키, Alt 대신 Option 키

* 다른 Shortcuts은 상단 바에 File → Preferences → Keyboard Shortcuts에서 확인 가능

 

1. Peek

 

지금 사용하는 function(함수)이 어디에 있는지 찾아주는 기능.

 

함수 위에 커서를 올리고 F12를 누르면 해당하는 함수가 있는 곳으로 이동한다.

이동하지 않고 수정하고 싶다면, Alt+F12를 누르면 바로 수정할 수 있다.

 

HTML&CSS에서 적용하고 싶다면 CSS Peak, HTML CSS Support Extension을 설치하자.

 

 

2. Multi-cursor

 

여러 줄의 코드를 동시에 작성하거나 수정하고 싶을 때 사용할 수 있다.

Alt+ Click하면 커서가 여러개 생겨서 수정할 수 있다.

수정을 완료했으면 ESC를 누르면 된다.

 

비슷한 기능으로 수정하고 싶은 라인을 선택(드래그)하고 Alt+Shift+I를 누르면 선택한 라인에 커서가 생긴다.

 

 

 

3. Snnippets

 

Tab으로 사용하는 자동 완성 기능.

 

Extensions에서 사용하는 언어에 따라서 Snippets를 설치한다. (React, Vue 등)

언어에 따라서 자주 사용하는 코드를 쉽게 완성할 수 있다.

 

예)

React에서

imrr 쓰고 Tab하면 router import 자동 완성.

imrs 쓰고 Tab하면 useState 자동 완성.

 

Vue에서

< 쓰고 Tab하면 template 자동 완성. (HTML에서 ! 쓰고 Tab하는 거랑 비슷한 거)

 

 

4. Refactoring

 

자동으로 function(함수) 만들어 주는 기능.

 

함수를 만들고 싶은 코드를 선택하고 Ctrl+Shift+R을 누르면 메뉴가 있다.

 

 

(1) Extract to constant in enclosing scope

 

원하는 변수명을 지정하자.

 

function 내부에 const 변수를 생성할 수 있다.

 

(2) Extract to inner function in funtion

 

 

function 내부에 새로운 function으로 생성한다.

 

(3) Extract to function(constant) in global scope

 

 

 

function 외부에 function이나 constant 변수를 생성한다.

 

(4) Move to a new file

 

함수명으로 새로운 js 파일이 생성되었다.

코드를 여러 줄 선택해서 새로운 파일로 내보내기할 수 있다.

 

 

5. Rename Symbol

 

 

변수를 선택하고 F2를 눌러서 변수명을 바꿀 수 있다. 참조된 변수명이 전부 바뀌게 된다.

비슷한 기능으로 Ctrl+D를 누르면 같은 코드를 선택해서 변경할 수 있다.

 

Ctrl+H로 Find & Replace 하는 방법보다 좋은 방법이다.

 

 

 

6. Emmet

 

나는 이 기능이 제일 신기한데 줄임말로 코딩하는 느낌이 드는 기능이다.

만약 HTML에서 div안에 p태그를 5개 생성하고 싶다면 'div>p*5' 이렇게 입력하고 Tab을 누르면 자동으로 생성된다.

 

 

 

Class를 부여하는 방법은 'div.container>p.title*5' 이렇게 하면 된다.

 

 

CSS도 적용 가능.

 

예)

dn + Tab → display: none

m10 + Tab → margin: 10px