에디터 기본 설정
{ "editor.fontFamily": "Monaco", "window.zoomLevel": 1, "editor.minimap.enabled": false, "javascript.preferences.quoteStyle": "single", "editor.tabSize": 2, "editor.wordWrap": "on", // js파일명 바뀌면 파일명을 쓰고 있는 다른 곳에서도 파일명 자동 변경 "javascript.updateImportsOnFileMove.enabled": "always", // 괄호 컬러 변경 "editor.bracketPairColorization.enabled": true, }
라이브서버 기본 브라우져 설정
Live Server 익스텐션 설치
{ "liveServer.settings.CustomBrowser": "chrome", }
ESLint, Stylelint, Prettier
ESLint, Stylelint, Prettier-Code formatter 익스텐션 설치
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, }
eslint
{ "eslint.enable": true, }
stylelint
{ "stylelint.enable": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, }
에디터 인터페이스 설정
Light Pink Theme, Material Icon Theme 익스텐션 설치
{ "workbench.colorTheme": "Light Pink", "workbench.iconTheme": "material-icon-theme", "material-icon-theme.folders.color": "#26a69a", }
Power Mode 익스텐션 설치
{ "powermode.enabled": true, "powermode.presets": "particles", "powermode.combo.timeout": 0, "powermode.shake.enabled": false, "powermode.explosions.size": 10, }
그 외 익스텐션 설치
Auto Rename Tag Autoprefixer Better Comments CSS Peak HTML CSS Support HTML to CSS autocompletion indent-rainbow Sass Live Sass Compiler ES7+ React/Redux/React-Native 등 ...
전체 (settings.json)
{ //! 에디터 기본 설정 "editor.fontFamily": "Monaco", "window.zoomLevel": 1, "editor.minimap.enabled": false, "javascript.preferences.quoteStyle": "single", "editor.tabSize": 2, "editor.wordWrap": "on", // js파일명 바뀌면 파일명을 쓰고 있는 다른 곳에서도 파일명 자동 변경 "javascript.updateImportsOnFileMove.enabled": "always", // 라이브서버 기본 브라우져 설정 "liveServer.settings.CustomBrowser": "chrome", //! eslint, stylelint, prettier "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, // eslint "eslint.enable": true, // stylelint "stylelint.enable": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //! 에디터 인터페이스 설정 "workbench.colorTheme": "Light Pink", "workbench.iconTheme": "material-icon-theme", "material-icon-theme.folders.color": "#26a69a", "editor.bracketPairColorization.enabled": true, // 파워모드 "powermode.enabled": true, "powermode.presets": "particles", "powermode.combo.timeout": 0, "powermode.shake.enabled": false, "powermode.explosions.size": 10, }