3. 프론트엔드 개발에 필요한 Visual Studio Code 확장 프로그램 설치 및 Setting

1. Korean Language Pack for Visual Studio code

VS code UI 를 한글화 시켜줌.

 

2. Beautify

코드를 깔끔하게 만드는 기능(들여쓰기 정리하기 및 줄 정리)

 

 

 

기능 기여도 명령의 HookyQR.beautify 복사 후 메뉴 검색하기 단축키인 Ctrl + Shift + p (mac의 경우 Cmd + shift + p)를 눌러 '바로 가기' 를 입력합니다. 그리고 기본 설정 : 바로 가기 키 열기를 클릭 후 검색창에다가 복사 해놓은 HookyQR.beautify를 입력 해 줍니다.

해당 명령어에 더블 클릭 후 키 조합을 Ctrl + Alt + L로 해줍니다.(다른 단축키로도 사용 가능)

 

3. Auto Rename Tag

자동으로 앞뒤의 태그 이름 변경하기(앞을 변경하면 뒤쪽의 태그도 자동으로 변경)

 

4. Live Server

프로젝트를 브라우저에 출력하기

개발을 위해 임시로 로컬 서버를 오픈하는 것

 

5. 유용한 단축키

 

사이드 바 열고 닫기

• MacOS : Cmd + B
• Windows : Ctrl + B

 

빠른 열기(이름을 통해 열기)

• MacOS : Cmd + P
• Windows : Ctrl + P

 

모든 명령 표시(에디터의 모든 명령에 접근)

• MacOS : Cmd + Shift + B
• Windows : Ctrl + Shift + B

 

편집기 닫기

• MacOS : Cmd + W
• Windows : Ctrl + W

 

찾기(검색)

• MacOS : Cmd + F
• Windows : Ctrl + F

 

줄 위(아래)로 이동

• MacOS : Alt(opt) + up(down)
• Windows : Alt + up(down)

 

위(아래)에 줄 복사

• MacOS : Alt(opt) +Shift + up(down)
• Windows : Alt + Shift + up(down)

 

들여쓰기(Indent)

• Tab
• 권장하는 공백크기는 2
• 영구 설정(메뉴검색 > 설정 입력 > tab size 입력 > 4 -> 2 로 변경

 

내어쓰기(Outdent)

• Shift + Tab

 

Beautify(정리된 코드 만들기)

• MacOS : Cmd + Alt(opt) + L
• Windows : Ctrl + Alt + L

 

이전 편집기 열기(좌측 창으로 전환)

• MacOS : Cmd + Shift + [
• Windows : Ctrl + PageUp

 

이전 편집기 열기(우측 창으로 전환)

• MacOS : Cmd + Shift + ]
• Windows : Ctrl + PageDown

 

편집기 분할(백슬래쉬)

• MacOS : Cmd + \
• Windows : Ctrl + \