[VSCode] 비주얼스튜디오코드 단축키(Shortcut) & 에밋(Emmet)

VSCode 단축키

 

인터페이스 & 세팅 & 파일 오픈

커맨드 팔레트 열기

윈도우 : Ctrl + Shift + P

맥 : Cmd + Shift + P

 

세팅 열기

Ctrl + ,

Cmd + ,

 

파일로 가기 (Quick Open)

Ctrl + P

Cmd + P

 

직전에 닫은 파일 열기

Ctrl + Shift + T

Cmd + Shift + T

 

사이드바 열고 닫기

Ctrl + B

Cmd + B

 

터미널 열고 닫기

Ctrl + `

Ctrl + `

 

키보드 단축키 확인

Ctrl + K + S

Cmd + K + S

---

커서 이동 & 선택

맨 위로 이동

Ctrl + Home

Cmd + ↑

 

맨 아래로 이동

Ctrl + End

Cmd + ↓

 

양 끝으로 이동

Ctrl + ← 또는 →

Cmd + ← 또는 →

 

단어 단위로 커서 이동

Alt + 방향키

Opt + 방향키

 

다중 선택

Alt + 마우스클릭

Opt + 마우스 클릭

>원하는 만큼 클릭 가능

 

Ctrl + Alt + ↑ 또는 ↓

Cmd + Opt + ↑ 또는 ↓

>이동하는 자리마다 커서 생김

 

Alt + Shift + 마우스 드래그

Opt + Shift + 마우스 드래그

> 드래그 한 위치에 커서 생김

 

블럭 씌우고 Alt + Shift + i

블럭 씌우고 Opt + Shift + i

> 커서가 제일 오른쪽에 생김

 

블럭 씌워 내용 선택

Shift + 방향키

Shift + 방향키

 

같은 내용 다중 선택 (하나씩)

찾으려는 내용을 선택 Ctrl + D

찾으려는 내용을 선택 Cmd + D

 

같은 내용 다중 선택 (모두)

찾으려는 내용을 선택 Ctrl + shift + L

찾으려는 내용을 선택 Cmd + shift + L

---

코드 작성

주석 처리

Ctrl + /

Cmd + /

 

부분 주석 처리

Alt + Shift + A

Opt + Shift + A

 

들여쓰기

Ctrl + [ 또는 ]

Cmd + [ 또는 ]

 

코드 가운데에 있는데 새롭게 한 줄 띄고 싶을 때

Ctrl + Enter

Cmd+ Enter

 

코드 접고 펴기

Ctrl + Shift + [ 또는 ]

Cmd +Opt + [ 또는 ]

 

코드 줄째로 이동

Alt + ↑ 또는 ↓

Opt +↑ 또는 ↓

 

코드 줄째로 복사

Alt + Shift +  ↑ 또는 ↓

Oopt +  Shift + ↑ 또는 ↓

 

코드 줄째로 삭제

Ctrl + Shift + K

Cmd + Shift + K

 

괄호나 따옴표 씌우기

씌울 영역만큼 블럭으로 잡고 원하는 기호 입력

괄호는 시작하는 괄호를 눌러야 씌워짐

 

---

Emmet

빠른 코딩을 위한 플러그인

vscode에서는 별도의 설치 없이 사용 가능하다.

 

HTML 기본 코드 자동 완성

html 파일에서 ! 입력 tab이나 enter

 

자식 태그 한번에 만들기

div 안에 p 태그 3개

 

div>p*3 <!-- tab 또는 enter -->

 

형제 태그 한번에 만들기

div 안에 p 태그와 a 태그

div>p+a <!-- tab 또는 enter -->

 

상위에 하나 더 넣고 싶을 때

div>ul>li 까지 썼는데 지우기는 귀찮은데 상위에 넣고 싶을 때

div>ul>li^ol <!-- tab 또는 enter -->

ul과 ol이 형제태그가 되고 li는 ul의 자식태그가 됨

  <div>
    <ul>
      <li></li>
    </ul>
    <ol></ol>
  </div>

 

그룹화하기

div>(header>ul>li)+(footer>ul>li) <!-- tab 또는 enter -->

header박스와 footer박스가 각각 형성됨

 

텍스트 넣기

div 안에 텍스트가 hello

div{hello} <!-- tab 또는 enter -->

 

 

클래스 만들기

div인데 클래스가 hello

div.hello <!-- tab 또는 enter -->

 

아이디 만들기

div인데 아이디가 hello

div#hello <!-- tab 또는 enter -->

 

 

순서대로 숫자 넣기

div 안에 p에 텍스트가 number 순서대로 3개

div>p{number $}*3 <!-- tab 또는 enter -->

$자리에 숫자가 알아서 들어감 클래스나 아이디에도 사용가능

  <div>
    <p>number 1</p>
    <p>number 2</p>
    <p>number 3</p>
  </div>

 

더미텍스트 넣기

div안에 더미텍스트

div>lorem <!-- tab 또는 enter -->

 

입력한 숫자만큼의 단어가 들어감

div>lorem5 <!-- tab 또는 enter -->

 

속성 넣기

div 안에 a 태그 3개인데 href 속성도 같이 넣기

div>a*3[href='#'] <!-- tab 또는 enter -->