단축키
Multi Selection
👍 Ctrl+d
한 단어를 선택하고 ctrl+d 반복적으로 눌러주면 중복 단어 자동으로 모두 선택됨 ⇒ 간단 삭제, 수정가능
Column (box) selection
👍 Ctrl+Shift+alt+↑ or ↓
해당 열에 커서 생성
( 코딩하다가 우연히 알게된 단축키인데 너무 편하다. 모르는 사람 없었으면… )
블럭으로 전체 선택-> Shift+alt+드래그
해당 블럭 끝에 커서 생성
💡 Tip!
블럭 끝에 커서 생성한 다음에 "Ctrl + ← or → (단어 별 이동), Ctrl + shift + ← or → (단어 선택)" 하면 편함
Move Word
Ctrl+← or →
단어 별 이동
Select Word
Ctrl+shift+← or →
단어 선택
Copy Line
👍 Ctrl+c / Shift+Alt+↑ or ↓
라인 복사
Cut Line
👍 Ctrl+x
라인 잘라내기
Move Line Up/Down
👍 Alt+↑ or ↓
라인 이동
Beginning/end of Line
Home, end
라인의 맨 처음, 맨 끝으로 이동
home 누르고 커서가 행 왼쪽(←)에 있으면 shift+ end,
커서가 오른쪽 끝(→)에 있다면 shift+home
행 전체 선택
Insert Cursor
Alt+마우스 클릭
다중 선택
Command palette
F1 / ctrl+shift+p
마우스없이 키보드로 원하는 명령어 검색하면 실행 가능
(save, format, calculate, terminal…)
Quick open
Ctrl+p
검색해서 원하는 파일 열기
User setting
Ctrl+,
세팅 열기
Toggle sidebar
Ctrl+b
사이드바 열고 닫기
Toggle terminal
Ctrl+’
터미널 열고 닫기
Keyboard shortcuts
Ctrl+k+s
키보드 단축키 설정
Beginning/end of File
Ctrl+home, ctrl+end
파일의 맨 처음, 맨 끝으로 이동
Insert line below
Ctrl+enter
코드 작성하다가 중간에 아래 줄로 이동하고 싶을 경우
Undo last Cursor
Ctrl+u
이전에 있었던 커서로 이동
익스텐션
1. Material Theme
테마 색상 변경
2. Marterial Icon Theme
아이콘 테마, 아이콘이 조금 더 생동감 있게 바뀜
코드 포멧팅 - ctrl + , 눌러서 setting 창으로 이동
❗ Prettier 가 적용이 안 될 경우
Default Formatter를 Prettier로 설정 변경해주면 정상적으로 동작
(Format on save 체크, tab width 2, JavaScript quote style : single로 변경)
4. Bracket Pair Colorizer
괄호마다 코드에 색깔을 다르게 줌
5. Indent-rainbow
- 들여쓰기 된 부분을 무지개 색깔로 하이라이트 표시
- 코드 읽을 때 도와줌
6. Auto Rename Tag 👍
앞에 태그를 바꾸면 뒤에 태그를 자동으로 바꿔줌
7. CSS Peek
- html에서 커맨드나 컨트롤키를 누른 상태로 클릭하면 해당 css로 이동하게 해줌
- html에서 css를 금방 찾게 해줌
8. HTML CSS Support
해당 html에 적용되어있는 css 추천
9. Live Server 👍
브라우저에서 바로 확인 가능
10. Html to Css auto completion
html에서 작성한 class, id 명 css에서 자동 완성
11. Markdown preview
- 커멘트 팔레트에 검색하면 md 파일 미리보기 볼 수 있음
♦️ Settings Sync
- 모든 세팅(익스텐션,단축키,설정값,스니펫 등)을 Github에 동기화해둘 수 있음
- 어디서든 같은 세팅을 할 수 있게 해줌
설정 동기화
→ 설정 동기화 할 곳에 Settings Sync 설치
→ Command Palette → sync 검색
→ Sync: 고급 옵션 → Sync: 설정 열기
→ 저장했던 Gist ID & 엑세스 토큰 입력
→ OS 에 맞게 Upload Key 타이핑 하거나 Command Palette 에서 Sync 검색 후 다운로드 설정
👀 출처!
블로그
유튜브