前端开发vscode配置

必备插件

• Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

  汉化必备

• Code Spell Checker

  拼写检查

• Auto Close Tag

  自动闭合标签

• Auto Rename Tag

  修改标签名自动成对修改

• Better Comments

  区分不同类型的注释，使代码注释更加醒目和结构化

• Color Highlight

• DotENV

• Dracula Theme Official

  推荐的一个主题

• Material Icon Theme

  推荐的一个图标主题

• EditorConfig for VS Code

  .editorconfig文件支持

• Error Lens

• Vue - Official

  支持Vue开发

• ESLint

• Stylelint

• Import Cost

  显示导入包的大小信息

• Path Intellisense

• Prettier - Code formatter

• Live Server

推荐配置

{
  "files.autoSave": "onFocusChange",
  // 配置主题
  "workbench.colorTheme": "Dracula Theme Soft", // 配置主题
  "workbench.iconTheme": "material-icon-theme", // 配置图标
  "workbench.tree.indent": 20, // 设置工作区树形视图的缩进
  "workbench.tree.renderIndentGuides": "always", // 显示工作区缩进参考线
  "explorer.compactFolders": false,

  "material-icon-theme.activeIconPack": "vue", // 可选：angular, nest, react, vue 等
  "material-icon-theme.folders.color": "#90a4ae",
  "material-icon-theme.opacity": 1,

  "window.zoomLevel": 1, // 正数放大，负数缩小
  "editor.fontSize": 14, // 编辑部分字号
  "terminal.integrated.fontSize": 13, // 底部终端字号

  // =============ESLint插件配置===============
  "eslint.enable": true, // 启用 ESLint
  // 验证的语言
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html"
  ],
  // =============Stylelint插件配置===============
  "stylelint.enable": true,
  "stylelint.validate": ["css", "scss", "vue"],

  // 编辑器配置
  "eslint.format.enable": true, // 是否开启保存自动格式化
  "editor.formatOnSave": true, // 保存时是否自动格式化代码
  "editor.formatOnPaste": true, // 粘贴时是否自动格式化代码
  "editor.formatOnType": true, // 输入时是否自动格式化代码
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化工具
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "editor.quickSuggestions": {
    "other": true, // 在代码中启用快速建议
    "comments": false, // 在注释中禁用快速建议
    "strings": false // 在字符串中禁用快速建议
  },
  // 配置不同文件类型的默认格式化工具
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "cSpell.userWords": [
    "wolfy87-eventemitter",
    "netbrowserpostman",
    "browserslist",
    "pxtorem",
    "qiankun",
    "unplugin",
    "viewerjs",
    "dragula",
    "vueuse",
    "jsnext",
    "axios",
    "imagin",
    "corejs",
    "qrcodejs",
    "swiper",
    "vant",
    "vuex",
    "dbaeumer",
    "wdcb"
  ],

  "cursor.diffs.useCharacterLevelDiffs": true
}