[VSCode] 비주얼스튜디오코드 유용한 익스텐션

Auto Close Tag

열린 태그를 작성하면 자동으로 닫힌 태그를 만들어 준다.

Auto Close Tag

 

Auto Rename Tag 

만들었던 태그 이름을 변경하면 그와 짝이 맞는 닫힌 태그도 이름을 바꿔준다.

Auto Rename Tag

indent-rainbow

칸별로 들여쓰기에 색상이 생겨 가독성이 좋아진다.

indent-rainbow

 

HTML CSS Support

html에서 작성해뒀던 css 클래스이름이나 아이디이름 자동완성을 이용할 수 있다.

HTML CSS Support

 

HTML to CSS autocompletion

CSS에서 작성해뒀던 html 클래스이름이나 아이디이름 자동완성을 이용할 수 있다.

HTML to CSS autocompletion

 

CSS Peek

ctrl이나 cmd를 누르고 CSS설정을 해둔 클래스나 아이디 이름을 클릭하면 빠르게 CSS 파일로 갈 수 있다.

CSS Peek

 

Material Theme

Set Color Theme 버튼을 눌러 VSCode의 배경색상을 설정 할 수 있다.

Material Theme

 

Material Icon Theme

파일 아이콘이 언어별로 예쁘게 바뀐다.

Material Icon Theme

 

Live Server

작업하고 있는 페이지를 브라우저에서 띄워준다. 파일을 변경하고 저장해도 새로고침 할 필요없이 반영된다.

단축키 : alt + L + alt + O / cmd + L + cmd + O

Live Server

 

Prettier

파일을 저장하면 코드가 정리된다. 설정을 통해 코드 스타일을 통일 할 수 있다.

 

Prettier

Settings(ctrl + , / cmd + ,)에서 Default Formatter와  Format On Save 설정을 해줘야한다.

Default Formatter

Fomat On Save

 

Bracket Pair Colorization

VSCode가 업데이트 되어 자체적으로 컬러 브라켓이 지원된다.

bracket pair colorization

전에는 Bracket Pair Colorizer 2 익스텐션이 추천되었는데 이제는 설치하지 않아도 된다.

Bracket Pair Colorizer 2

 

Javascript Auto Backtick

${}를 감지하면 따옴표로 감싸져있던 문자열의 따옴표를 자동으로 백틱으로 변경해준다.

Javascript Auto Backtick

---

유용하지는 않지만 재미있는 익스텐션

Power Mode

코드를 입력할 때마다 창이 흔들리면서 이펙트가 나온다.

Power Mode

settings에서 power mode를 껐다 켰다 할 수 있다.

settings power mode

아이콘을 눌러 settings.json 파일을 열고 코드를 붙여넣으면 테마를 바꿀 수 있다.

코드와 테마의 종류는 익스텐션 설치 페이지의 detail > Choose Your Explosions 부분에서 확인할 수 있다.

powermode.presets