VSC 자주 사용하는 단축키 정리

🎃 VSC 단축키 정리를 해볼까

 

Visual Studio Code에서 자주 사용하는 단축키를 정리해보자. 단축키와 코드 생성 팁을 통해 보다 효율적이고 편리한 개발 생활을 즐길 수 있을 것이다. 참고로 window 기준 정리.

 

---

👉 주요 단축키 정리

모든 단축키 열기

     Ctrl + K + S

Settings 열기:

     Ctrl + , (Settings.json 파일을 통한 커스터마이징 가능)

Sidebar 토글

     Ctrl + B

Terminal 열기

      Ctrl + Shift + (백틱, 틸트, 템플릿 리터럴)

Command Palette 열기

      Ctrl + Shift + P or F1

동시 선택

      Ctrl + D (2번 입력), Ctrl + Shift + D와 같은 역할

동시 수정

      Ctrl + Alt + 방향키(상, 하)

      Alt + Click

      Alt + Shift + Drag

      Alt + Shift + I

Quick Open

      Ctrl + P

문장의 양 끝 이동

      Home / End

코드의 양 끝 이동

      Ctrl + Home / Ctrl + End

복사 / 붙여넣기

      Ctrl + C / Ctrl + V / Alt + 방향키(위, 아래)

단어 복사

      Ctrl + Shift + 방향키(위, 아래)

주석 처리

      Ctrl + /

들여쓰기 / 내어쓰기

      Ctrl + [ / Ctrl + ], Tab, Shift + Tab

한 줄 삭제

      Shift + Del

파일 생성

      Ctrl + N

---

👉 코드 스니펫 및 단축키

🍙 HTML 코드 생성

h1{hello world}
h1+p
h$*6
p#hello
p.hello
p#hello1.hello2
p.one.two.three   : 클래스 각각 총 3개의 p태그
table>(tr>td*6)*4
ul>li.item$*5
ul>li*5
lorem5   : 5개 단어
lorem*3  : 3개 문장

🍙 CSS 코드 생성

p{
        pos
        pos:a
        t
        r
        b
        l
        d
        d:f
        v
        m
        matop
        mbot
        mle
        mri
        c
    }

 

▶ 위의 CSS 단축어가 뭔지 모르겠다면? 아래 참고

• pos: position (위치)
• pos:a: position: absolute (절대 위치)
• t: top (위쪽 여백)
• r: right (오른쪽 여백)
• b: bottom (아래쪽 여백)
• l: left (왼쪽 여백)
• d: display (표시)
• d:f: display: flex (플렉스 박스 모델)
• v: visibility (가시성)
• m: margin (마진)
• matop: margin-top (위쪽 마진)
• mbot: margin-bottom (아래쪽 마진)
• mle: margin-left (왼쪽 마진)
• mri: margin-right (오른쪽 마진)
• c: color (글자 색상)

 

---

🍟 정리하며 - 정말 유용하고 자주 쓰는 것!

한 번에 수정

      Ctrl + Shift + ↑ or ↓

한 줄 삭제

      Shift + Del

복잡한 코드 생성:

      table>(tr>td*6)*4 : tr 4줄, td 6줄의 table 생성

      ul>li.item$5 : ul태그 내에 item 클래스를 가진 li 태크 5개 생성

      ul>li*5 : ul태그 내에 li태그 5개 생성

 

자주 사용하면 정말 편리함