VS Code 단축키 / 숏컷

-개인 백업용, 수시 갱신됨

 

▶해당 줄 위아래 라인으로 이동 : alt + 방향키(↑또는 ↓)

▶해당 줄 복붙 : Shift + alt + 방향키(↑또는 ↓)

▶여러 라인에 동시 커서 놓기 : Ctrl+ alt + 방향키(↑또는 ↓) 또는 alt+마우스로 원하는 곳 클릭

▶해당 줄 주석 처리 : Ctrl + /

▶이전 커서 위치로 커서 이동 : Ctrl + U

▶해당 줄 중간에서 끝줄 엔터+아래줄로 넘어가기 : Ctrl + Enter

▶Tab키 반대방향 작용 (=들여쓰기 레벨 낮추기) : Shift+Tab

▶블록한 라인들 끝에 커서 놓기 : Shift+Alt + I 또는 Shift+Alt +마우스 드래그

▶블록한 요소와 같은 이름의 요소 선택 : (블록잡은 상태에서) Ctrl+D (커맨드 반복입력)

 

▶Ctrl+K+S : VSC 단축키 목록 보기

▶Ctrl+B : 사이드 탐색창 토글

▶Ctrl+Shift+P : 명령어 팔레트
  -실시간 저장내용 새로고침 없이 반영 : Live Server Open with Live Server->Alt+L
  -.md파일(마크다운) 미리보기 : 명령어 팔레트에서 Markdown preview

 

▶html 문서 생성 시 기본 틀 자동생성

! + Enter 또는 html:5 + Enter 

▶클래스명을 포함하여 태그 자동생성 (태그 기본값 div)

태그명.클래스이름 + Enter
ex) .status → <div class="status"></div>
ex) span.input-text → <span class="input-text"></span>

▷한번에 여러개의 태그 자동생성하기 (태그 기본값 div)

태그명.클래스이름*개수 + Enter
ex) .status*3 → <div class="status"></div> <div class="status"></div> <div class="status"></div>

▷내부에 들어가는 태그까지 지정

태그명.클래스이름*개수>내부태그명.클래스이름 + Enter
ex) li.status*2>a.status-link
<li class="status"><a href="" class="status-link"></a></li>
<li class="status"><a href="" class="status-link"></a></li>

이런식으로도 가능함

nav>ul>li*4>a

<nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>