비쥬얼 스튜디오 코드 설치 및 웹개발을 위한 필수 익스텐션 10개 추천 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://www.youtube.com/watch?v=bS9yTI2fC0w 

 

 

1. Material Theme

스튜디오 코드 색상 테마 

나는 검은색 배경이 편해서 : Darker High Contrast 로 적용했다.

 

 

2. Meterial Icon Theme

파일 아이콘 이미지를 바꿔주는 아이콘 테마. 제일 무난하고 깔끔하다. 아무리 찾아봐도 머터리얼 아이콘만한게 없는 듯하다.

 

3. Prettier - Code formatter

코트를 포멧팅 해주는 편안한 툴이다.

cmd + , /       |   ctrl + ,

 

prettler 포멧을 어떻게 할건지 세부적으로 설정할 수 있다.

 

 

4. Bracket pair Colorizer

가로에 색감을 주어서 가독성을 높여주는 툴이다.

 

5. indent-rainbow

들여쓰기가 명확하게 보여서 코드 읽는데 도움을 주는 툴이다.

 

 

6.Auto Rename Tag

HTML 편집할때 손쉽게 태그를 바꿀 수 있게 도움을 주는 툴이다.

 

 

7. CSS Peek

Control 또는 Command 누르고 클릭을 하게 되면 해당하는 CSS를 찾아주는 툴이다.

 

8. HTML CSS Support

HTML에서 CSS에 자동완성을 할 수 있게 해주는 툴이다.

 

 

 

 

Command + Shift + P 누른후 

검색창에 :  Live Server:Open with Live Server 눌러주면 새로운 브라우저 창이 열린다.

작성만 하고 저장하면 자동으로 업데이트되는 고마운 툴이다.

 

 

10. Markdown Preview

비쥬얼스튜디오에 내장되어있는 기능이다.

Project를 깃허브에 올리게 되면 README.MD가 추가로 들어가야 되는데

마크다운 작성할때 어떻게 보이는지 확인하면서 작성하고 싶다면. 

Command + P 누른 후 검색창에 Markdown: open Preview 선택하면