VS Code

Essential Short Cuts

• cmd + b : 사이드바 토글
• cmd + shift + E : 파일사이드바
• cmd + shift + X: 익스텐션 사이드 바
• cmd + 1 : 코드 파일 창 이동
• cmd + 0 : 익스플로러 창 이동
  • cmd + down : 익스플로러창에서 파일 실행 (맥전용) 윈도우는 enter. 맥에서 enter는 이름변경이 됨
• ctrl + ` : 터미널 창 이동
• ctrl + 1 ,2 ,3, 4 ,5 ... : 코드파일 창 순서대로
• cmd + p + p : 가장 마지막에 선택한 파일

검색 단축키

• alt + shift + down up : 라인 복사
• alt + up down : 라인 이동
• cmd + k : 줄 삭제
• cmd + d : 단어 선택
• cmd + k + d : 다음 단어 스킵 후 다음 중복 단어 선택
• cmd + f : 단어 찾기 (regex 적용됨) ex → jpg | png | gif,
• cmd + opt + f : 단어 찾고 replace 하기

검색창에 입력: cmd + shit + p

html 검색분류 : @:

파일 검색 : #

필수 확장

**Image preview : 라인 옆에 이미지 보여줌 (img 태그로 그림 불러왔는데 적용됬는지 안됐는지 확인 쌉가능)**

prettier

peacock color : 여러창 띄울때 색설정해놓으면 무슨 작업인지 확인가능

auto rename tag : 변경시 닫힘 태그 자동변경

react snippets : imrc 같은 스니펫으로 개빨리 작업가능

color theme: hop light 강추

file icon theme : material icon 같은거 까는거 추천

세팅 변경

단축키

• cmd K cmd S : shortcut
• cmd + shift + p : settings

변경할 옵션들

minimap : 끄기 (아무도 안씀)

toggle side bar : 오른쪽으로 이동 (왼쪽에서 여닫을 경우 코드창이 영향 받아서 개불편함. 작업 오래할수록 필수)

open editors: 0 ( 아무도 안씀)

toggle activity bar: 끄기

breadcrumbs: 끄기 (위에 작은줄로 현재주소 알려줌. 쓸일없음)

cursor blinking: Expand (커서 위치 확인 easy)

toggle format on save : prettier (prettier 설치 후 옵션 변경하면 ctrl + save 할때 마다 자동 포맷해줌)

단축키 등록

shortcut 변경: cmd + k + s

open settings UI, JSON → 단축키 등록

“breadcrumbbs.enabled”: false (setting.json에 추가)

예시:

Font 변경

Fira Code 코딩용 무료 폰트

https://github.com/tonsky/FiraCode

setting font에 Fira Code 넣어주면 적용됨

HTML: Emmet

졸라 빠르게 작업 가능

div + tab
<div></div>

a + tab
<a href=""></a>

div#main.app + tab
<div id="main" class="app"></div>

<!-- #region -->  // 접었다 폈다할수 있음 #region #endregion
div>div>div>a + tab
<div>
  <div id="hi">
    <div id="number">
      <div>
        <div>
          <div><a href=""></a></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- #endregion -->

div + tab =

ctrl + space = emit back (에멧을 인식하지 못하는 경우 다시 인식함)

toggle format on save : prettier (prettier 설치 후 옵션 변경하면 ctrl + save 할때 마다 자동 포맷해줌)

태그 선택

cmd + shift + p : balance emmet 검색

balance inward , balance outward

여러겹으로 둘러싸진 태그들을 순차적으로 찾아준다 (outward 확장 inward 축소)

wrap with abbreviation

선택한 여러겹의 태그를 wrap할 수 있음

: 단축키 등

디버깅

숫자 옆 우클릭하면 브릭포인트 설정가능

여기다가 명령문을 설정할 수 있음

그럼 F5를 눌러서 디버깅을 돌릴때 콘솔에 출력됨

에러 찾기 쌉가능

불필요한 파일 숨기기

settings.json

{
	"files.exclude": {
		"**/*.js": true,
		"**/*.js.map": true,
	}
}

해당 확장자 갖고 있는 파일들 안보임 (삭제 아님)