[VS Code] 확장 플러그인 및 기본 설정

1) Korean Language Pack for Visual Studio Code

- 한국어버전으로 VS code를 사용할 수 있도록 해주는 플러그인

 

2) Prettier - Code formatter

- HTML, 자바스크립트, 타입스크립트, CSS 등 다양한 언어 형식을 잡아줌

- 코드를 보기 좋게 정해진 코딩 컨벤션대로 정렬해주는 도구

 

3) Atom Keymap

Atom에서 자주 사용하는 바로 가기 키를 사용할 수 있음

 

4) Settings Sync

- github에 VS Code Setting을 올리고 다운받을 수 있음

- Setting Sync 업로드 shift + alt + U

- Setting Sync 다운로드 shift + alt + D

5) Auto Rename Tag

- html 시작 태그 변경시 자동으로 종료태그 변경

 

6) Material Icon Theme

- 파일들 아이콘을 변경시켜주는 테마

 

7) ESLint

- linter는 소스코드를 분석해서 문법 에러, 버그를 찾고 보고해주는 도구

- ESLint는 ES6까지도 잘 분석해줘서 가장 인기 많은 플러그인

 

8) CSS Peek

- HTML파일에서 CSS를 사용한 class의 해당 css파일 위치로 이동

- HTML태그에서 css를 사용한 부분에 ctrl + 우클릭 or F12

 

9) HTML CSS Support

- CSS파일 속성 자동완성 기능 제공

- HTML에서 CSS에 미리 써있는 class를 가져다 쓸수 있음

- class 작성 후 ctrl+spacebar 단축키로 사용 가능

 

11) Live Server

- HTML소스등의 내용을 실시간으로 서버를 띄워 화면에 표시

- 설치 후 하단의 GoLive버튼 클릭 또는 단축키 사용

- live Server 서버 열기 Alt + L, O / 닫기 Alt + L, C

 

12) htmltagwrap

- 선택 영역을 선택후 단축어를 입력하면 HTML 태그로 감싸줌

- 원하는 영역 선택 후 Alt + W (Option + W for Mac)

 

13) Highlight Matching Tag

- 매칭되는 태그에 하이라이트 표시를 해줌

 

14) Bracket Pair Colorizer

-일치하는 괄호를 색상별로 분류

 

15) open in browser

- Shift + Alt + B

 

 

(cntl + shift + p) 설정 단축키

 

자동 줄바꿈

word wrap - editor:word wrap 을 on으로 설정

 

미니맵 해제

minimap 검색 - editor > minimap:abled의 체크를 해제

 

한국어 설정

플러그인 - 검색 - korea - install - 우측 하단에 뜨는 재시작 알림창 ok 클릭

 

미리보기

플러그인 - 검색 - live server - install - html 파일에서 우클릭 - open with live server

 

   "editor.fontFamily": "D2Coding, Consolas, 'Courier New', monospace",

참고 ossam5.tistory.com/89