웹개발을 위한 기본 Extension 11(Visual Studio Code)

Visual Studio Code 설치 후

 - VSCODE : 텍스트 에디팅 툴중에 하나로 타입스크립트 언어를 기반으로한 오픈소스 프로젝트 입니다. 

 

 

Visual Studio Code 웹개발을 위한  Extension 

Extensions 설치

 

1. Live Server 

HTML에서 CSS에 자동완성을 이용할수있다.

 

2. Material Theme  

눈에 편안한 색 설정해보기

Set Color Theme 클릭하여 Material Theme Darker High Contrast (선택) 합니다. 

 - 다른 색상들도 있으니  선택해보세요.

3. Material Icon Theme 

기본적인 Icon 들을  생동감있게 해준다.

4. Prettier - Code Formatter

코드를 포맷팅 해주는 편안한 툴이다.

설치후 셋팅(맥:cmd + , ) (윈도우: Ctrl + , )

 

 

윈도우에서 "Ctrl + , " 를 누르면 아래와 같은 창이 열린다.

 

- save로 검색 하여 

- 파일을 저장할때 포맷이 가능하도록 Format On Save 아래 체크박스에 체크를 한다.

 

 

 

- Editor Default 로 검색 하여  Prettier - Code formatter esbenp.prettier-vscode 선택

 

 

- prettier 로 검색 후 스크롤을 쭉 아래로 내려  Prettier: Tab Width 부분에 

  기본탭이 4로 되어있는것을 2로 수정한다. 

- quote 검색 하여 

javaScript > PreFerences: Quote Style 를  auto 에서 single 로 변경

TypeScript > PreFerences: Quote Style 를  auto 에서 single 로 변경

 

5. Bracket Pair Colorizer

괄호쌍(시작괄호, 종료괄호)마다 색상이 지정되어 괄호쌍별 구분을 쉽게 할수있다.

6. Indent Rainbow

들여쓰기가 조금더 명확하게 보여서 코드를 읽는데 도움을 준다.

7. Auto Rename Tag

하나의 쌍으로 이루어진 Tag중에서  Tag의 이름을 하나만 변경하면  나머지 Tag의 이름도 자동 변경된다

 

8. CSS Peek

CSS를 금방 찾을수 있게 도와주는 extension 이다.

해당 HTML에 정의된 class id , class string을 Ctrl 키를 누른채 클릭하면 정의되어 있는 해당 CSS파일로 이동한다.

9. HTML CSS Support 

HTML에서 CSS에 자동완성을 이용할수있다.

 

10. HTML to CSS autocompletion 

HTML에서 정의한 클래스를 이 CSS에서 자동으로 완성해주는 기능

 

11. Markdown Preview 

내장 되어있어서 별도 설치 할 필요는 없다

 - md:mark down파일들을 작성할때 미리보기

 - command palette(Ctrl+shift+p) 에서  Mark Down : Open preview 를 선택한다

 

 

 

간단한 코드 동작 확인시 아래 사이트에서 확인

 

jsbin.com

 

jsfiddle.net

 

codesandbox.io