VS Code 단축키와 Emmet

Visual Studio Code 단축키

• ctrl+shift+k : 행 삭제
• ctrl+Enter : 아래에 행 삽입
• ctrl+shift+Enter : 위에 행 삽입
• alt+Down : 행을 아래로 이동
• alt+Up : 행을 위로 이동
• shift+alt+Up/Down : 위에 행 복사 추가
• ctrl+d : 다음 선택 찾기
• ctrl+alt+Up/Down : 커서를 아래에 추가
• ctrl+shift+[ : 영역 접기
• ctrl+shift+] : 영역 펼치기
• ctrl+/ : 주석 토글
• ctrl+h : 바꾸기
• ctrl+PageUp/Down : 페이지 이동
• ctrl+스페이스바 : 트리거 제안
• ctrl+shift+m : 오류 보기
• ctrl+\ : 편집기 나누기
• ctrl+number : 해당 편집기 그룹에 초점 맞추기
• ctrl+~(`) : 터미널 열기
• ctrl+, : 사용자 설정 열기
• ctrl+shift+g : 소스 제어 표시
• ctrl+shift+d : 디버그 표시
• ctrl+shift+u : 출력 보기
• alt+l+o : Live Server
• ctrl+alt+o : open in browser
  Live Server는 web server 형식, open in browser는 파일 열기 형식

Visual Studio Code Emmet

Emmet이란 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인

div>ul>li → 하위에 포함된 tag를 생성

div+p+bq → 병렬로 나열된 tag를 생성

ul>li*5 → *(숫자)만큼 반복 생성

ul>li.item → .(클래스 이름)를 통해 클래스 이름의 tag를 생성

ul>li#item → .(ID 이름)를 통해 ID 이름의 tag를 생성

span{Hello} → {}안의 요소을 가진 tag 생성

span{Wrold$}*5 → *(숫자)만큼 반복($)하여 World1, World2, World3 ··· 식으로 생성

lorem5 → lorem(숫자) 숫자만큼의 더미 텍스트(=sample) 생성