vscode开发VUE格式化属性换行

解决方法
1、安装Beautify、Prettier - Code formatter、Vetur三个插件
2、编辑setting.json文件如下

{
  // "window.zoomLevel": 0,
  "terminal.integrated.fontFamily": "monospace",
  "git.enabled": false,
  "editor.fontFamily": "Consolas, 'Consolas', monospace",
  "[git-commit]": {
    "editor.rulers": [72],
    "workbench.editor.restoreViewState": false
  },
  "security.workspace.trust.untrustedFiles": "open",
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "editor.wordWrap": "off",
  "vetur.format.defaultFormatter.scss": "none",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // "vetur.format.defaultFormatterOptions": {
  //   "js-beautify-html": {
  //     "wrap_attributes": "aligned-multiple"
  //   },
  //   "prettyhtml": {
  //     "printWidth": 120,
  //     "singleQuote": false,
  //     "wrapAttributes": false,
  //     "sortAttributes": false
  //   }
  // },
  // "vetur.format.defaultFormatterOptions": {
  //   "js-beautify-html": {
  //     "wrap_attributes": "auto"
  //   },
  //   "prettyhtml": {
  //     "printWidth": 120,
  //     "singleQuote": false,
  //     "wrapAttributes": false,
  //     "sortAttributes": false
  //   }
  // },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "editor.inlayHints.fontFamily": "Consolas, 'Consolas, monospace",
  "workbench.startupEditor": "none",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.scrollback": 10000,
  "bracketPairColorizer.depreciation-notice": false,
  "editor.fontSize": 14,
  "debug.console.fontSize": 14,
  "window.zoomLevel": 0, // 调整窗口的缩放级别，原始大小是 0
  "editor.tabSize": 2, // 一个制表符等于的空格数
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 定义一个默认格式化程序
  },
  "[javascript]": {
    "editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数名和后面的括号之间加个空格
  "vetur.format.options.tabSize": 2, // 每个缩进级别的空格数，由所有格式化程序继承
  "vetur.format.scriptInitialIndent": false, // js部分是否有初始缩进
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  // "minapp-vscode.disableAutoConfig": true,
  "explorer.confirmDelete": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // - auto: 仅在超出行长度时才对属性进行换行
      // - force: 对除第一个属性外的其他每个属性进行换行
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐
      // - force-expand-multiline: 对每个属性进行换行
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
      "wrap_attributes": "auto", // 属性折行对齐方式
      "wrap_line_length": 0, // 设置一行多少字符换行
      "end_with_newline": false
    },
    "prettier": {
      "semi": true, // 是否在每行末尾添加分号
      "singleQuote": true // 使用单引号
    }
  },
  "eslint.validate": ["javascript", "html", "vue"],
  "prettier.printWidth": 800, // 超过最大值换行
  "prettier.tabWidth": 2,
  "prettier.jsxBracketSameLine": true,
  "prettier.jsxSingleQuote": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

2、在项目目录创建文件.prettierrc
这步最重要，不然一切都扯淡，我看了网上好多博客，都不写以下这步。
在你的项目根目录下创建文件.prettierrc
注意，文件名前面的小点是要的，就是说文件名是包含那个小点的，文件内容如下：
{
“printWidth”: 3000,
“eslintIntegration”: true,
“stylelintIntegration”: true,
“tabWidth”: 4,
“semi”: true,
“singleQuote”: true,
“bracketSpacing”: true,
“arrowParens”: “avoid”,
“htmlWhitespaceSensitivity”: “ignore”,
“javascript.format.insertSpaceBeforeFunctionParenthesis”: true,
“files.insertFinalNewline”: true,
“useTabs”: false,
“endOfLine”: “auto”,
“ignorePath”: “.gnore”,
“trailingComma”: “none”
}
参考资料