[정보] VScode 비쥬얼 스튜디오 웹 개발을 위한 필수 익스텐션 추천

 

 

 

1. Material Theme

 

 

 

 

 

VS code 테마를 설정할 수 있다.

내 눈에 적합한 테마로 피로감을 줄 일 수 있는 익스텐션

 

 

 

 

 

 

 

 

나는 다크한 배경에 눈에 띄는 텍스트로

선택해서 사용중이다.

 

 

 

 

 

 

 

2. Material Icon Theme

 

 

 

 

 

작업을 하다보면 다양한 파일과 폴더들을 생성하게 된다.

아이콘 테마가 없으면 ui가 똑같아서

파일 구분에서 불편함이 느껴진다.

 

 

 

 

 

 

 

 

icon theme을 설치하면

내가 만드는 파일에 맞게 아이콘이 꾸며줘서

파일 구분이 쉽게 되어 편리하다.

 

 

 

 

 

 

 

 

3. CSS Peek / CSS Navigation

 

 

 

html 파일에서 class 명을 클릭하면

그 class 명에 맞는 css 파일로 이동된다.

 

그러나 React에서는 className으로 설정 되어있어

CSS Peek이 활성화 되지 않는다고하여

React에도 적용되는 CSS Navigation을 추천받았다. 

 

 

 

 

 

 

 

4. Color Highlight

 

 

 

 

 

CSS에서 컬러값을 사용하는 경우가 많은데

코드로만 되어있으면 무슨색인지 구분이 어려울때

color highlight 사용하면 편리하다.

 

 

 

 

 

 

 

 

상위 이미지처럼 컬러값에 맞는 색상이

표기가 되어 바로 확인하기 좋다.

 

 

 

 

 

 

 

 

5. Auto Close Tag

 

 

 

 

html에서 코드 작성할 때, 자동으로 닫아주는 기능.

매우 유용하다...

 

 

 

 

 

 

 

 

6. Auto Rename Tag

 

 

 

 

html에서 웹표준에 맞춰 작업하다보면

태그를 수정해야 할 때가 있다.

그때 시작 태그와 닫기 태그를 맞춰서 수정해야하는데

이 익스텐션이면 자동으로 맞춰 수정된다.

 

쏘 이지하다.

 

 

 

 

 

 

 

 

7. Indent-rainbow

 

 

 

 

 

코드가 많이 작성되다보면

매우 많은 들여쓰기가 있는데 한눈에 알아보기 어려울 때 있다.

 

 

 

 

 

 

그때 이 익스텐션을 사용하면

간격에 맞춰 무지개색으로 구분이 되어

편리하게 라인을 구분할 수 있어 좋다.

 

 

 

 

 

 

8. HTML CSS Support

 

 

 

html에서 css를 네이밍 작성할 때,

철자 하나만 사용해도 네이밍에 도움주는 익스텐션

 

 

 

 

 

 

 

9. Live Server

 

 

 

내가 작성한 코드를 실시간으로 확인 할 수 있는 익스텐션

 

 

 

 

 

10. Markdown Preview

(markdown 실시간 확인 법)

 

 

readme.md 파일에 프로세스들을 정리하는 경우가 많은데,

그 readme 파일 작성 시, 실시간으로 확인 가능하다.

 

 

 

 

 [ 방법 ] 

 

readme.md 파일을 열어 둔 상태에서

 

1. ctrl + shift + P

2. 'markdown open preview' 검색

 

or 

 

1. ctrl + shift + V (마크다운 바로 열기)