카테고리 없음

VSCODE 시작, EXTENSIONS

* short cut key(단축키) 사용하기

- Command Palette (ctrl + shift + P) or (F1) : VScode에서 실행 가능한 명령 검색 기능

- setting (ctrl + ,) or Command Palette에서 검색 : 각종 설정, 색상 변경, tab size등..

 

 

EXTENSIONS

1. Material Theme

화면 색상 종류 추가 (기본 VScode에서도 어느정도는 제공해줌)

2. Material Icon Theme

아이콘 스킨 변경

3. Prettier

Code formatter, 파일 저장(ctrl + S)시 설정 적용.

ex) 원래 코드 작성할 때는 들여쓰기(indent)가 spacebar 4칸이고 줄도 엉망이었지만 저장 시 설정해둔 규격에 맞게 변경

-'beautify'와 비교했을 때 좀 더 강제성이 있다고 함

4. Braket Pair Colorizer

각 괄호 짝에 맞게 짝마다 다른 색상을 부여해서 구분하기 쉽게 해줌

5. Indent Rainbow

들여쓰기 부분에 하이라이트 처리를 해서 각 들여쓰기를 구분하기 쉽게 해줌

6. Auto Rename Tag

HTML 편집 시, 태그를 둘중에 하나만 바꿔도 나머지 태그도 같이 바꾸어줌

7. CSS Peek

리눅스의 ctags 처럼 HTML 파일에서 궁금한 CSS를 ctrl을 누른 상태로 클릭하면 궁금한 CSS가 정의된 CSS파일 위치로 이동

8. HTML CSS Support

HTML에서 CSS에 미리 써져있는 클래스의 자동완성을 이용가능

9. HTML to CSS Autocompletion

HTML에서 정의한 클래스를 CSS에서 자동완성이 가능

 

10. Live Server

원래 HTML 파일을 수정하면 해당하는 브라우저를 확인할 때마다 새로고침을 해주어야 하는데 Live Server를 이용해서 HTML 파일을 열면 저장(ctrl + S)시 바로 내용이 업데이트 됨

11. Markdown Preview

마크다운 확장자(.md)파일을 미리보는 기능 (ctrl + \) or (오른쪽 위 책모양 아이콘)으로 확인 가능

12. Emmet

기본형식, 매크로를 딕셔너리처럼 특정 명령어를 작성하고 tab을 누르면 설정해 놓았던 내용을 자동완성 시켜줌