Visual Studio Code 설치 및 웹 개발을 위한 필수 익스텐션 13가지

https://code.visualstudio.com/Download

다운로드 홈페이지 들어가서 자신의 컴퓨터에 맞게 다운로드 해주면된다

 

Visual Studio Code는 마이크로소프트(Microsoft)에서 만든것이며 Text Editor 이다.

Text Editor 로는 아톰, 서브라임,비주얼 스튜디오 코드가 있다

익스텐션(연장하다)을 설치하기위해 단축키 Ctrl + Shift +X 를 눌르거나 왼쪽 상단에 4개의 사각형을 눌러줘도 된다

Material Theme

---

Visual studio code의 색상을 바꿔준다. 색 테마 설정을 눌르고 자신이 원하는 색을 설정하면 된다

적용 전과 적용 후의 색의 차이을 알수가 있다 

 

 

 

Material Icon Theme

---

html, js, css 등 아이콘테마 변경이 가능하다. 머티리얼 외에도 많은 테마가 있으니 취향에 맞게 선택하면된다

 

 

 

Prettier - Code formatter

---

작성하는 코드에 색상을 넣어 구분하기 쉽게 해준다

단축키 ctrl + , 누르면 Code세팅창으로 이동하게 된다.

1. Visual Studio Code 가 번역이 영어이면 'prettier' 검색해서 Tab Width를 4에서 2로 바꾸는걸 추천한다

- TabWidth = Tab키를 누를시 스페이스바 2번 누르는 효과가 나온다. 

 

2. save 검색 후 Format On Save 를 클릭해준다.

- Format On Save = 단축키가 상당히 불현하고 외우기 어렵다보니, 저장과 동시에 Formatting을 해주는 기능을 이용하는 것이 훨씬 간편하고 좋다

 

3. prettier quote 검색 후  Quote Style 2개다 auto -> single로 변경해주자

- 대부분 single Quote을 이용하기 때문에 auto에서 single로 바꿔준다

 

 

 

BracketPairColorizer

---

{ } 괄호에 색감을 주어서 코드의 가독성을 높여주는 기능이다 괄호마다 색 지정이 달라져서 빠트린 괄호가 있는지 확인 이 가능하다

 

 

 

indent-rainbow 

---

indent - rainbow 는 들여쓰기 된 부분만큼 배경이 하이라이트 되어 코드를 읽을 때 도움을 준다

 

 

 

Auto Rename Tag

---

HTML 편집할 때 큰 도움이 되는 기능으로 앞 태크를 바꾸면 자동적으로 마무리 태크 역시 자동으로 변경이된다

 

 

 

CSS Peek

---

어떤 Css가 적용되어있는지 빠르게 확인할 수 있는 기능이다 class나 id가 적용된 HTML 문서 내 원래 태크 부분을

Ctrl + 왼쪽(마우스)클릭하면 해당 스타일로 이동하게된다

 

 

 

HTML CSS Support

---

클래스 별로 스타일을 적용한 후에, html문서로 돌아와 클래스 값을 변경하고 싶을 때 자동완성으로 추천된다

 

 

 

Live Server

---

html이나 css 수정 시 웹페이지가서 f5를 눌러 수정하기를 해야하는데 live server는 html 수정 후 저장하면 자동으로 수정이 되게 해준다 

사용방법 html 작성 한 곳에서 Ctrl + Shift+ P 를 눌러 명령 팔레트를 띄우고 Live Server : Open with Live Server를 클릭

그러면 웹페이지가 나오고 html 수정후 Ctrl + S 눌러 저장만 해주면 자동으로 수정이 되는걸 볼수가 있다

 

 

 

Markdown Preview Enhanced

---

이건 git md파일에 올리때 사용한다

readme.md에 작성후 ctrl+shift+p 를 누르고 Markdown Open Preview를 작성 해주면된다

그러면 우리가 작성한 md파일을보여주고 작성시 git에 올라갈때 어떻게 올라가는지 보여준다

 

 

 

Git Graph

---

git에 올린것들을 그래프로 보여준다

 

 

 

open in browser

---

.html 파일에서 ALT +B 단축키를 사용하영 웹페이지를 실행 할 수 있다

 

 

 

Code runner

---

javaScript 콘솔 출력하고싶을때 Ctrl + Alt + n 을 하면 실행이 가능하게 해준다