VScode를 사용하는 개발자로서 삶을 윤택하게 해줄 기능들을 알아보자

Peek

f12
해당 함수의 본문으로 이동한다
f12 + option
해당 함수의 본문을 새 창에 띄워준다

🚀 HTML & CSS Peek
VScode 확장 프로그램으로 HTML Support Peek와 CSS Peek를 받아주면 HTML, CSS에서도 Peek 기능을 통해 요소로 한 번에 이동하거나 새 창을 띄워 바로 수정이 가능하다

---

Refactoring

cmd + shift + r
해당 코드를 함수로 감싸거나 변수로 만들거나 새 파일로 빼준다

단축키 실행 후 코드 위 전구를 누르면 위의 기능들을 할 수 있다

코드를 짜고보니 코드가 중복되거나 함수로 묶는다면 좋을 것 같을 때 해당 단축키를 통해 함수로 만든다면 굉장히 편할 듯하다

---

Rename Symbol

f2
선택된 이름이 사용된 모든 곳을 변경한다 (참조된 곳까지 변경)

---

Snippets

VScode 확장 프로그램으로 해당 Snippets를 받으면 쿨~한 자동완성 기능을 제공해준다

---

Emmet

emmet + enter 또는 tap
HTML, CSS 등을 작성할때, 시간을 단축시켜주는 기능이다

<!-- div>ul>li*3 !-->
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

/*w100*/
width: 100px;
/*h200*/
height: 200px;
/*dn*/
display: none;

레게노

---

Command palette

cmd + shift + p
VScode에서 실행 가능한 모든 명령어를 마우스 없이 사용 가능

---

다중 선택

option + 마우스 클릭
option + shift + 마우스 드래그

optin + shift + i
선택된 모든 줄 맨 끝에 커서가 생성됨

Shortcuts

cmd + k + s
모든 바로가기 키를 확인 할 수 있음

cmd + b
탐색기 창 열기/닫기

cmd + d
해당 단어와 같은 단어를 순서대로 선택해줌
cmd + u
이전 커서로 이동

cmd + enter
다음 줄로 이동

cmd + ,
설정 파일 열기

cmd + l
해당 줄의 코드 모두 선택

option + 위 아래
해당 줄을 위 아래로 움직일 수 있음

cmd + c
해당 줄 복사

shift + option + 위 아래
해당 줄 위 아래에 복사

cmd + x
해당 줄 잘라내기

cmd + p
파일 실행

ctl + 백틱
콘솔 창 실행
(주의 ❗️)백틱만 가능함 ₩는 안되니 주의

끝~