VS Code Extensions / 단축키

Visual Studio code - Activity Bar - Extensions(플러그인 개념) 설치

1) korean language pack for visual studio code 설치 (한글화 기능-메뉴바 한글로 변경됨.)

2) Beautify 설치 : 코드정리

  설치 후 [기능기여도] 탭의 명령 부분의 "HookyQR.beautify" 이름을 복사

  →[파일]-[기본설정]-[바로가기 키]에서 상단의 HookyQR.beauty로 검색

  →Beautify selection (HookyQR.beauty) 키조합 (alt+ctrl+L)으로 단축키 설정.

 

 

왼쪽 예제처럼 코드 들여쓰기가

정리되어있지 않을때

위의 단축키를 실행하면

 

 

 

아래예제와 같이 자동으로 정돈된다.

 

 

 

 

3) Auto Rename Tag 설치 : 태그 이름을 한번에 변경

일반적으로 태그를 생성한 뒤 다른 태그로 바꾸고 싶을때 열린태그와 닫힌태그명을 각각 수정해야함.

예를 들어 <div> 태그를 <span>으로 수정한다고 하였을때 <div>, </div> 각각 수정 필요.

 

 

 

앞의 열린태그만 수정하여도 뒤의 닫힌태그가 함께 수정됨.

 

 

 

4) Live Server 설치 : 웹브라우저에 출력 시 필요

 

---

단축키

Ctrl + B : 사이드바 열기 / 닫기

Ctrl + P : 이름으로 파일을 검색

Ctrl + Shift + P : 모든 명령 표시

Ctrl + W : 편집기 닫기

Ctrl + F : 찾기(검색)

Ctrl + H : 찾기(검색) / 바꾸기(대체)

Alt + Up / Dwon : 줄 위/아래로 이동

Alt + Shift + Down : 아래에 줄 복사

Alt + Shift + Up : 위에 줄 복사

Ctrl + Z : 되돌리기

Tab : 들여쓰기(Indent) / '공백을 사용한 들여쓰기'를 2로 설정 권장.

Shift + Tab : 내어쓰기(Outdent)

Ctrl + PageUp :  이전 편집기 열기(좌측 창으로 전환)

Ctrl + PageDown : 다음 편집기 열기(우측 창으로 전환)

Ctrl + ＼(\) = 편집기 분할

---

VS에 프로젝트가 열리지 않은상태 : 맨 하단 보라색, 프로젝트 폴더가 열림 : 파란색으로 바뀜.

 

.vscode : 현재 프로젝트의 VS Code 설정 정보가 들어있는 폴더로 삭제해도 상관 없지만 보통 VS Code로 프로젝트를 켜면 다시 생성되니 일반적으로 무시(Ignore)하면 됩니다.

보통 이름이 .(마침표)로 시작하는 파일이나 폴더는 숨김 전용 파일/폴더입니다.

 

Show All Commands : Shift + Ctrl + P

Open File : Ctrl + O

Open Folder : Ctrl +K , Ctrl + O

Open Recent : Ctrl R