VSCode代码格式化

废话不多说上图

vetur直接点击设置 进入拓展设置

前提下载 Vetur !!!

点击 JSON中编辑 后 copy 下方代码

最后附带 换行方法 个人整合所有方法集合

{
  "workbench.colorTheme": "Default Light+",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 添加 vue 支持
  "eslint.validate": ["javascript", "vue", "html"],
  // #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple"
      // #vue组件中html代码格式化样式
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "files.associations": {
    ".eslintrc": "json",
    "*.vue": "vue",
    "vetur.validation.template": "false"
  },
  "git.ignoreWindowsGit27Warning": true,
  "git.openRepositoryInParentFolders": "never",
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "workbench.startupEditor": "none"
}

标签之间不换行 搜索 “wrap_attributes” copy 后边的 粘贴 “wrap_attributes”: “aligned-multiple”
标签之间换行 搜索 “wrap_attributes” copy 后边的 粘贴 “wrap_attributes”: “force-aligned”

注 ：

// 对属性进行换行 wrap_attributes
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
 
// prettyhtml(doc: string, options?): vFile
// - tabWidth: 缩进级别的空间宽度（默认值：2）
// - useTabs: 使用制表符代替空格进行缩进（默认值：false）
// - printWidth: 使用不同的最大行长度（默认值：80）
// - usePrettier: 对嵌入内容使用更漂亮（默认值：true）
// - prettier: 为嵌入的内容使用自定义更漂亮的设置（默认：本地配置）
// - singleQuote: 使用单引号代替双引号（默认值：false）
// - wrapAttributes: 强制包装属性（当它有多个时，默认：false）
// - sortAttributes: 按字母顺序对属性进行排序（默认值：false）

能看到最后 再告诉你 如果一开始用VScode v-for 飘红怎么办 好办 看图

编辑器最下方 如果 不和图中 红框 一致的 改成一样的 改成 : Vue-html