vscode setting.json

{
  // ------------------------ 格式化代码 ------------------------
  // 一个制表符等于的空格数
  "editor.tabSize": 2,
  // 启用后，保存文件时在文件末尾插入一个最终新行。
  "files.insertFinalNewline": true,
  // 启用后，保存文件时将删除在最终新行后的所有新行。
  "files.trimFinalNewlines": true,
  // 启用后，将在保存文件时剪裁尾随空格。
  "files.trimTrailingWhitespace": true,
  // eslint 保存自动格式化 插件名: ESLint
  // enables auto fix on save. Please note auto fix on save is only available if VS Code's
  // files.autoSave is either off, onFocusChange or onWindowChange. It will not work with afterDelay.
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 美化代码 插件名: prettier
  // 是否在每行末尾加一个分号
  "prettier.semi": false,
  // 使用单引号
  "prettier.singleQuote": true,
  // 换行字符串阈值
  "prettier.printWidth": 100,
  // JSX 有多个属性时，将 `>` 放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）
  "prettier.jsxBracketSameLine": true,
  // 格式化 vue 插件名: Vetur
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "eslintIntegration": true,
      "semi": false,
      "singleQuote": true,
      "printWidth": 100,
      "jsxBracketSameLine": true
    },
    "prettyhtml": {
      "printWidth": 80,
      "singleQuote": false,
      "wrapAttributes": true,
      "sortAttributes": false,
      "bracketSameLine": false
    }
  },
  // 各个类型文件的默认格式化工具
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化。
  "editor.formatOnPaste": true,

  // ------------------------ 编辑器相关 ------------------------
  // 执行文字相关的导航或操作时将用作文字分隔符的字符(比如双击选中文字, 只会选中下面分隔符中的文字)
  "editor.wordSeparators": "`~!！@#$￥%^……&*(（)）=+[【{]】}\、|;；:：'‘"”,，.。<《>》/、?？",
  // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
  "explorer.openEditors.visible": 0,
  // 自动保存（失焦保存）
  "files.autoSave": "onFocusChange",
  // 控制是否绘制已修改 (存在更新) 的编辑器选项卡的顶部边框。
  "workbench.editor.highlightModifiedTabs": true,
  // 控制键入时是否应自动显示建议
  "editor.quickSuggestions": {
    "other": true,
    "comments": true, // 注释
    "strings": true // 字符串
  },
  // 面包屑导航
  // https://code.visualstudio.com/updates/v1_26#_breadcrumbs
  "breadcrumbs.enabled": true,
  // 在导航路径视图中仅显示当前符号
  "breadcrumbs.symbolPath": "last",
  // 当存在多个目标位置时, 跳转到主要位置(不显示预览视图)
  "editor.gotoLocation.multiple": "goto",
  // 小地图始终显示滑块
  "editor.minimap.showSlider": "always",
  // 小地图最大宽度
  "editor.minimap.maxColumn": 80,
  // 小地图每行用色块显示
  "editor.minimap.renderCharacters": false,

  // ------------------------ 插件相关 ------------------------
  // 在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射。
  "emmet.includeLanguages": {
    "vue-html": "html"
  }
}