VSCode extension

기본 settings.json

// settings.json

"javascript.preferences.quoteStyle": "single",
"editor.tabSize": 2,
"editor.fontFamily": "Monaco",
"editor.minimap.enabled": false,
"editor.wordWrap": "on",

 

 

당연히 설정하고 보는 익스텐션.

1. Live Server

// settings.json

"liveServer.settings.CustomBrowser": "chrome",

2. Prettier - Code formatter

// settings.json

"editor.formatOnSave": true,

 

3. eslint

 

4. Autoprefixer

css3에 벤더프리픽스를 자동으로 붙여주는 익스텐션

실행 방법 : command palette -> autoprefixer:Run

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.

 

5. Auto Rename Tag

태그 수정 시 한 쌍이 자동으로 수정

 

6. CSS Peak

command + 클릭 : 해당 css파일로 바로 이동

 

7. indent-rainbow

들여쓰기를 색상으로 표시해줌.

 

8. HTML to CSS autocompletion

html에서 정의한 id, class명을 css에서 자동완성 가능하게 해줌.

 

9. HTML CSS Support

html에서 css 클래스,아이디명 자동 완성

(얘는 vscode 오픈하고 최초 1회만 되고 그 담부터 안됨. 참나.)

 

---

지겨운 까만 코태기를 잠시나마 극복시켜주는 화려한 익스텐션.

 

1. Light Pink Theme

// settings.json

"workbench.colorTheme": "Light Pink",

 

 

2. Power Mode

// settings.json

"powermode.enabled": true,
"powermode.presets": "particles",
"powermode.combo.timeout": 0,
"powermode.shake.enabled": false,
"powermode.explosions.size": 10,

 

3. Material Icon Theme

폴더, 파일 아이콘 예쁨.

// settings.json

"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.folders.color": "#26a69a",