Extensions

내 기준으로 유용하다고 생각되는 확장기능들이다. 확장기능이 너무 많기 때문에 자신만의 확장기능 목록을 가지고 있는 것이 좋겠다.

소스코드 보기/정렬/검사

Prettier

Code formatter
Setting 단축키는 Ctrl + ,
Settings – Default formatter에서 Prettier 선택
Settings -> Format On Save 체크
Settings -> Prettier -> Single Quote 체크(Format시에 큰따옴표를 작은 따옴표로 변경. JavaScript용)
Settings -> Prettier -> Quote Style – single 선택(JavaScript용)
Settings -> Prettier -> Tab Width 2로 설정(Format시에 자동 변경됨, HTML용)
Settings -> Tab Size 2로 설정(HTML용)

Bracket Pair Colorizer

괄호가 중첩될때 괄호별로 색깔을 다르게 주어 구분을 쉽게 할 수 있음

indent-rainbow

들여쓰기별로 색상을 다르게 표시한다

ESLint

자바스크립트의 오류, 스타일 체크

편의도구

Live Preview

VSC 내에서 창분할로 미리보기를 할 수 있음

Live Server

HTML보기는 서버 없어도 되는데 이 확장기능의 존재의의는 편집기에서 저장하면 웹브라우저 새로고침을 자동으로 함

Lorem ipsum

cmd/ctrl+shift+p, “lorem ipsum” 입력 후
insert a line or paragraph 를 선택하면 더미 텍스트 생성된다

HTML Tag

Auto Close Tag

HTML/XML 태그 입력시 닫는 태그 자동 생성

Auto Rename Tag

시작, 닫기 태그 동시에 수정

Highlight Matching Tag

특정 태그 선택시 열고 닫는 태그를 눈에 띄는 색상으로 표시

html tag wrapper

선택한 텍스트를 태그로 감싸기