VSCode 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",
  // 괄호 컬러 변경
  "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.enable": true,
}

{
  "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,
}