Visual Studio Code & Extensions

Visual Studio Code 설치

https://code.visualstudio.com/download

 

추천 익스텐션(Extensions)

• Material Theme
• Material Icon Theme
• Prettier - Code formatter

Prettier 설치 후 Setting 창으로 이동(Mac : Cmd + , Win : Ctrl + ,)

Save 검색 -> Editor: Format on Save 체크

Prettier 검색 -> Prettier: Tab Width의 값 2로 설정

Prettier qoute 검색 -> Javascript Quote style을 single로 변경, Typescript도 single로 변경

• Bracket Pair Colorizer : { }(brackets) 색상 적용
• Indent Rainbow : 들여쓰기를 읽기 쉽게 도와줌
• Auto Rename Tag : Html tag 자동 변경
• CSS Peek : html 파일에서 각 CSS에 대한 정의로 CSS ID 및 클래스 문자열을 엿볼 수 있다. 
• HTML CSS support : CSS 자동완성
• Live Server : (로컬) 브라우저 자동 업데이트
• Emmet(Mithril Emmet) : 빠른 속도로 HTML 마크업
• HTML to CSS autocompletion : HTML에서 정의한 함수를 CSS파일에서 자동완성 제공