Contents
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
선택한 텍스트를 태그로 감싸기