본문 바로가기
Front-end/IDE (편집기)

비쥬얼 스튜디오 코드 확장 프로그램 추천

by mooyou 2021. 11. 23.
728x90
300x250

Visual Studio Code extension

 

1. Auto Rename Tag

태그명 변경 시에 자동으로 닫힘 태그를 변경시켜주는 확장 프로그램

 

 

2. Auto Close Tag

닫는 태그를 자동으로 삽입해 주는 플러그인

 

3. Bracket Pair Colorizer2

코드에서 사용되는 괄호를 짝을 맞춰서 색을 다르게 보여주는 플러그인

 

 

4. Color Highlight

다큐먼트에서 css/web 색상을 찾아서 표시해주는 플러그인

 

 

 

5. CSS Peak

html코드에 적용된 css가 어디에 위치해 있는지 한 번에 찾아주는 플러그인

사용방법

  • Peek : css파일을 인라인으로 로드하고 바로 편집 (Ctrl+Shift+F12)
  • 이동 : css파일로 직접 이동하거나 새 편집기에서 연다. (F12 or Ctrl + Click)
  • 마우스 오버 : Ctrl+ 마우스 오버 하면 정의가 표시되고 클릭하면 css를 볼 수 있다.

 

 

6. HTML CSS Support

해당 문서에 적용되어있는 css를 추천해주는 확장 프로그램

 

 

7. indent-rainbow

코드 들여쓰기 횟수에 따라서 색을 다르게 표현해주는 확장 프로그램

 

 

8. Material Icon Theme

다양한 종류의 Material Icon을 제공하는 플러그인

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

 

9. Community Material Theme

 


10. Sublime Material Theme

 

 

 

 

비쥬얼 스튜디오 코드 설치와 기본코드 설정을 확인하려면 아래 포스팅 참고

https://moo-you.tistory.com/155

 

Visual Studio Code 비쥬얼 스튜디오 설치 및 환경설정 변경하기 [무료 코드 편집기]

Visual Studio 비쥬얼 스튜디오 설치 및 환경설정 변경하기 [무료 코드 편집기] 목차 1) Visual Studio Code 비쥬얼 스튜디오 코드 설치하기 2) 비쥬얼 스튜디오 코드 한국어로 변경하기 3) 색 테마 변경

moo-you.tistory.com

 

728x90
반응형

댓글