[VScode] 프론트엔드를 위한 확장팩 설치

indent-rainbow 

코드의 들여쓰기 부분을 색깔을 넣어서 구분해줌 

 

auto Rename Tag

html 태그의 여는 태그를 수정할 경우, 닫는 태그도 자동으로 수정함

 

CSS peek

(Window 사용시) ctrl+마우스 클릭하면, html 문서에서 해당 css 속성이 사용된 문서로 이동함

 

HTML to CSS autocompletion

html 문서에서 작성한 클래스명을 css 문서에서 자동완성 가능하도록 함 

css 문서에서 작성된 코드에 마우스를 가져다대면, 해당 css 속성이 html 문서의 어느곳에서 사용되었는지 확인할 수 있음

 

HTML CSS Support

ctrl + space 입력 시, 해당 html 문서에 ID 또는 class 자동완성 및 link 나 style 등으로 연결된 스타일 시트의 자동완성 지원 

 

Live Server

html 문서 작성 시 새로고침 없이 변경사항이 바로 적용됨

(status bar 의 Go Live 를 클릭하거나,  사이드바의 해당 문서에서 우클릭을 하여 Open with Live server 클릭해서 확인)

 

Material Icon Theme

파일 아이콘 변경 테마 

 

prettier

코드를 정해진 스타일에 따라 자동 정리함

설치 후 설정창으로 이동 (Ctrl + ,) 

1. 저장 시 포맷터 자동 저장 : format on save 입력 →  format on save 에서 박스 체크 
2. 탭 간격 설정 : prettier 입력 → Tab Width 2로 설정 (들여쓰기(tab) 의 갯수가 2번) 
3. 자바 스크립트 스타일 설정 (문자를 큰 따옴표로 기재해도, 작은 따옴표로 자동 변경)
   : prettier quote 입력 → Single quote 박스 체크 →
    JavaScript › Preferences: Quote Style &  TypeScript › Preferences: Quote Style 를 single 타입으로 변경
   
4. default formatter 입력 → Editor: Default Formatter 를 prettier-code formatter 타입으로 변경
5. 기본 탭 사이즈 변경 : tab size 입력 → tab size 2로 변경 (2칸으로 변경함)

만약 포매팅이 적용 안되었다면?

html 문서에서 마우스 우클릭 → 문서 서식 프로그램 → 포맷터를 prettier-code formatter 으로 선택.

 

---

문서 포맷팅 

설정 → 텍스트 편집기 → 서식  

 

Format On Paste 

코드 붙여 넣었을 때 자동 정렬하는 기능

 

Format On Save

코드 저장 시 자동 정렬 

 

Format On Type

코드 입력 시 자동 정렬