[VS Code] 유용한 단축키와 익스텐션 + 설정

우아한테크코스 페어프로그래밍을 할 때, 페어들에게 단축키와 익스텐션 질문을 많이 받았다. 그래서 개인적으로 잘 사용하고 있는 유용한 단축키와 익스텐션을 정리해 보기로 했다.
 
❗window 기준.
Mac은 ctrl 대신 command 키를 사용하거나 그래도 되지 않는다면 사용자 설정을 통해 단축키를 설정하면 된다.
 

단축키

Multi Selection
👍 Ctrl+d
동일한 단어 선택
한 단어를 선택하고 ctrl+d 누르면 해당 단어와 같은 단어가 선택됨 (누를 때마다 순서대로 선택)
 
 
Column (box) selection
👍 Ctrl+Shift+alt+↑ or ↓
해당 열에 커서 생성
 
블록으로 전체 선택-> Shift+alt+드래그
 
 
Move Word
Ctrl+← or →
단어 별 이동
 
 
Select Word
Ctrl+shift+← or →
단어 선택
 
 
Copy Line
👍 Shift+Alt+↑ or ↓
라인 복사
 
 
Move Line Up/Down
👍 Alt+↑ or ↓
라인 이동
 
 
Cut Line
👍 Ctrl+x
라인 잘라내기
 
 
Beginning/end of Line
👍 Home, end
라인의 맨 왼쪽, 맨 오른쪽으로 이동
 
home → shift+ end,
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
키보드 단축키 설정
 
 
Undo last Cursor
Ctrl+u
커서 위치 이전으로 이동
 

Suggestion
👍 Ctrl+Space (Mac:  ⌘+I)
자동 완성
 
 
Rename All
👍 F2
함수/변수/컴포넌트명 전체 변경
(현재 파일뿐만 아니라 다른 파일에 있는 이름도 변경됨)
 
 

---

익스텐션

0. 코딩 속도를 올려주는 필수 익스텐션 ✨
 0-1. JavaScript (ES6) code snippets : shortcut

 0-2. IntelliCode : 자동 완성

 
1. Material Theme

테마 색상 변경

 

2. Marterial Icon Theme

폴더나 파일을 만들면 이름 옆에 확장자/폴더명에 맞는 아이콘 생성

 

3. Preitter - Code formatter 👍

코드 포맷팅 - ctrl + , 눌러서 setting 창으로 이동

 

❗ Prettier 적용 안 될 경우
Default Formatter: Prettier로 설정 변경, Format on save 체크해 주면 정상적으로 동작
 
 

4. Bracket Pair Colorization Toggler

괄호마다 색깔을 다르게 줌

 
5. Indent-rainbow

• 들여 쓰기 된 부분 무지개 색깔로 하이라이트 표시
• 코드 읽을 때 도와줌

 

6. Auto Close Tag 👍

태그(<p>)를 쓰면 클로즈 태그(</p>)도 자동으로 입력됨

 
 
7. Auto Rename Tag 👍

앞에 태그를 바꾸면 뒤에 태그도 자동으로 바꿔줌

 

8. CSS Peek

• html에서 커맨드나 컨트롤키를 누른 상태로 클릭하면 해당 css로 이동하게 해 줌
• html에서 css를 금방 찾게 해 줌

 

9. Live Server 👍

브라우저에서 바로 확인 가능

 

10. Html to CSS autocompletion

html에서 작성한 class, id 명 css에서 자동 완성

How to configure

 
11. CodeSnap

원하는 코드를 캡처해 코드를 가독성 좋게/깔끔하게 보여줄 수 있음

사용 방법
캡처하고 싶은 코드 드래그
→ 우클릭, CodeSnap 클릭
→ 코드 스냅 아이콘 클릭해 저장
 
 

12. Code Spell Checker 👍

오타가 나면 밑줄을 그어 알려줌
 
Quick Fix

• Mac: ⌘+. or Cmd+.
• Window: Ctrl+.

 

13. Multiple cursor case preserve 👍

같은 단어를 여러 개 선택해서 수정할 때 대문자는 대문자로, 소문자는 소문자로 자동 변환

 
14. TODO Highlight 

// TODO: 또는 // FIXME: 에 하이라이트를 줘 눈에 띄게 해 줌 ( 깜빡하지 않게 도와줌 )

15. vscode-styled-components👍

styled-components를 css처럼 색깔 변경, 자동완성

 

16. Color Highlight

해당 색깔로 하이라이트를 줌

 

17. Htmltagwrap👍

태그로 감싸고 싶은 부분을 드래그 하고 `alt + w`(Mac: option + w) 누르면 바로 태그로 감싸짐

 

♦️ Settings Sync  👍👍 

→ 최근에 Mac으로 바꿨는데 vs code에서 내장 된 기능이 있어 이 익스텐션 없이도 동기화 했었다. 

     왼쪽 맨 아래 톱니 바퀴 모양을 클릭하고 설정 동기화를 누르면 된다.

• 모든 세팅(익스텐션, 단축키, 설정값, 스니펫 등)을 Github에 동기화해 둘 수 있음
• 어디서든 같은 세팅을 할 수 있게 해 줌

설정 동기화
  → 설정 동기화 할 곳에 Settings Sync 설치
  → Command Palette → sync 검색
  → Sync: 고급 옵션 → Sync: 설정 열기 
  → 저장했던 Gist ID & 액세스 토큰 입력

  → OS 에 맞게 Upload Key 타이핑 하거나 Command Palette 에서 Sync 검색 후 다운로드 설정

 

아래는 개인적으로 편하게 사용하는 설정들이다.

ctrl/command + shift + p를 눌러 사용자 설정 JSON 파일을 열고 아래 코드를 적어주면 된다.

  // User Settings (JSON)
  
  // 저장할 때마다 아래의 기능을 실행
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true, // eslint rule 때문에 에러가 발생하는 부분을 고쳐준다
    "source.removeUnusedImports": true, // 사용하지 않는 import를 제거해준다
    "source.fixAll.stylelint": true // stylelint에 어긋나는 부분을 고쳐준다
  },

 

---

👀 참고
블로그
유튜브