VS Code Extensions

Auto Close Tag - HTML/XML close tag를 자동으로 닫아줌

Auto Rename Tag - 스타트태그나 클로즈태그 내용 하나 수정하면 다른것도 바꿔줌

VS Color Picker

CSS Peek- HTML태그 클릭하면 해당 태그를 다루는 CSS파트로 연결됨(ctrl+hover)

HTML CSS Support - HTML에서쓴 id,class네임을 CSS에서 자동완성해준다

HTML to CSS autocompletion

Prettier -코드정렬

Prettier Now

Sass

Live Server - 웹으로 미리보기하려면 필수

Live Sass Compiler - 파일저장하면 SASS,SCSS파일을 바로 CSS로 변환해준다

Image preview - img태그에 마우스 대면 이미지 미리보기 가능

TODO Highlight - //TODO:  혹은 FIXME: 쓰면 색상하이라이트가 표시되고 모아볼수도있음. 

 

Material Theme

Github Dark - 평소에 쓰던 Theme

Material Icon Theme - 파일앞에 아이콘 넣어준다

 

JavaScript code snippets - snippet이 작은 조각이라는 뜻인데, 이미 완성되어있는 코드들을 갖다쓸수있는방법. (for,while문등을 작성할때 등등) 생산성 증대

ESLInt - JS 코드를 분석해 문법이나 안티패턴을 알려준다

Wrap Console Log - console.log() 를 일일이 입력하지않게 도와준다. 블록선택후 단축키설정에서 ctrl+L 누르면 선택된 부분을 console.log(선택된부분) 이 아래줄에 코드로 들어오게해서 썼음

 

Node Require

node-snippets 

 

vscode-styled-components

styled-components-snippets