VS Code + VUE 代码自动格式化配置

插件列表

1. ESLint
2. Vetur

setting.json

{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ],
  "vetur.validation.template": false,
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 200, //换行长度
      // 对属性进行换行。
      // - auto: 仅在超出行长度时才对属性进行换行。
      // - force: 对除第一个属性外的其他每个属性进行换行。
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
      // - force-expand-multiline: 对每个属性进行换行。
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
      "wrap_attributes": "auto"
    }
  },
  "editor.formatOnSave": true, // 在保存时自动格式化
  "editor.tabSize": 2, // tab距离
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "git.ignoreLimitWarning": true,
  "git.confirmSync": false,
  "typescript.format.insertSpaceAfterConstructor": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": false,
  "typescript.preferences.quoteStyle": "single", // 使用单引号
  "javascript.preferences.quoteStyle": "single", // 使用单引号
  "javascript.format.insertSpaceAfterConstructor": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // 函数名后增加空格
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false, // 函数名后增加空格
  "html.format.wrapAttributes": "force-expand-multiline",
  "eslint.quiet": true
}