[Vscode] VSC 비주얼스튜디오코드 유용한 확장 프로그램

Auto Rename Tag

 Auto Rename Tag만 설치해두면 둘 중 아무 태그나 수정해도 열리고 닫히는 요소 두개를 동시에 수정할 수 있다.

단순한 기능이지만 이걸 설치해 쓰냐 안 쓰냐에 따라 작업 속도 차이가 크게 벌어진다.

또한 실수로 둘 중 하나의 태그를 수정 못 할 일도 없고 오타로 인해 서로 짝이 맞지 않는 문제도 결코 발생하지 않는다.

 

 

 

 

Beauty

 

 HTML 태그들을 이쁘게 정리해줍니다. 사용 방법은 간단합니다. 일단 페이지의 모든 태그를 선택한다.

Ctrl+A하고 그 상태에서 Ctrl+Shift+B를 눌러주면 된다. 그러면 코드 정리가 끝난다.

 

 

 

 

 

CSS Peek

 

 

HTML 태그에 입력된 클래스명이 있는 경우 해당 클래스명을 Ctrl을 누른 상태로 클릭하면 CSS의 어떤 부분이 적용중인지 코드 위치를 바로 찾아주는 기능을 가지고 있다.

현재 적용된 이 클래스값의 CSS가 어디 위치인지를 빠르게 알면 스타일 속성들을 바로 확인할 수 있으니 작업 속도가 향상된다.

 

 

 

 

CSS Preview

 

 

CSS에서 입력되는 스타일 코드에 따라 실시간으로 미리보기 화면에 적용되는 기능이다.

 

 

 

HTML CSS Support

 

 

CSS에서 생성한 클래스명이나 ID명을 HTML 태그에서 입력 할 때 자동완성으로 쉽게 입력할 수 있도록 도와주는 확장 플러그인이다.

이걸 사용하면 클래스값이나 ID값의 오타로 인한 오류를 크게 줄일 수 있다.

 

 

 

HTML End Tag Labels

 

 닫히는 태그 요소의 끝 부분에 현재 이 태그가 어떤 클래스명이 적용된 요소인지,

또는 어떤 ID값이 사용된 태그인지를 주석으로 표시해 준다.

참고로 주석은 선택되지 않는 수정 불가능한 상태로 표시된다.

 

 

 

Image Preview

 

 

HTML에서 img 태그 사용 시 이미지 경로에 마우스를 올리면 어떤 이미지가 적용되어있는지 미리 볼 수 있는 확장 플러그인이다.