코드 편집툴 vscode의 사용 팁 정리.
1. 단축키 모음
1) 이동 관련 단축키
- Ctrl + Enter
커서가 위치한 곳 아래 줄에 빈 행을 삽입한다.
- Ctrl + Shift + Enter
커서가 위치한 곳 윗 줄에 빈 행을 삽입한다.
- Alt + ↑/↓
선택한 행을 위나 아래로 이동한다. (여러 행 선택 가능)
- Alt + Shift + ↑/↓
선택한 행을 복사하며 이동한다. (여러 행 선택 가능)
2) 편집 관련 단축키
- (★) Ctrl + /
드래그로 선택한 부분을 주석처리한다. (주석 처리를 취소하고 싶을 때도 동일)
먼저 단축키를 입력하고 텍스트를 입력하는 방법도 가능하다.
- (★) Alt + Shift + A
드래그로 선택한 행들(블록)을 한꺼번에 주석처리한다.
- Ctrl + H
동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정한다.
(기본은 하나씩 수정. Ctrl + Alt + Enter 입력시 한 번에 전부 수정할 수 있다.)
- Ctrl + BS
커서 위치 왼쪽의 단어를 삭제한다.
-
Ctrl + Del
커서 위치 오른쪽의 단어를 삭제한다. -
(★) F8
오타로 인한 오류를 확인할 수 있다. -
Alt + Z
자동으로 줄을 바꾸어준다. -
(★) Ctrl + K + F
드래그로 선택한 부분을 들여쓰기한다.
(전체선택 Shift + Alt + F)
3) 자동 완성 단축키
- (★) ! 입력 후 Enter
html 파일의 기본 탬플릿을 만들어준다.
- (★) 태그명 입력 후 Tab
태그를 생성한다.
- 태그 > 태그 > 태그
태그를 중첩 생성한다.
div>ul>li
<div>
<ul>
<li>
- (★) 태그#아이디
태그 아이디를 생성한다.
div#name
<div id="name">- (★) 태그.클래스
태그 클래스를 생성한다.
div.work
<div class="work">2. 편리한 익스텐션
1) Live Server
웹페이지를 새로고침하지 않아도
사용자가 변경한 코드를 실시간으로 웹페이지에 반영해준다.
(Alt + L → O로 실행 가능)
2) Tabout
Tab키만 누르면 자동으로 따옴표나 괄호, 세미콜론을 건너뛰어서 점프시켜준다.
