VS Code使用Vetur插件+prettierrc配置格式化规范

1.下载插件vetur
2.配置vscode设置
        打开vscode，文件-首选项-设置，下拉找到settings.json，将下面代码复制进去

// settings.json
{
    "window.zoomLevel": 1,
    // 使能每一种语言默认格式化规则
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    /* vue文件的格式化单独设置*/
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
      }
    },
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },
    // "files.autoSave": "afterDelay",
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "debug.javascript.debugByLinkOptions": null,
    "settingsSync.ignoredExtensions": [
    
    ]
  }
  

3.配置prettierrc
        新建.prettierrc.js文件到vue根目录下，注意必须是跟vue.config.js同级的根目录

// .prettierrc.js
module.exports = {
  printWidth: 300, // 超过最大值换行
  tabWidth: 2, // 缩进字节数
  useTabs: false, // 缩进不使用tab，使用空格
  semi: false, // 句尾添加分号
  singleQuote: true, // 使用单引号代替双引号
  proseWrap: "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  arrowParens: "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  disableLanguages: ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
  endOfLine: "auto", // 结尾是 \n \r \n\r auto
  eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
  htmlWhitespaceSensitivity: "ignore",
  ignorePath: ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  parser: "babylon", // 格式化的解析器，默认是babylon
  requireConfig: false, // Require a 'prettierconfig' to format prettier
  stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
  trailingComma: "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  tslintIntegration: false // 不让prettier使用tslint的代码格式进行校验
};

4.在vue项目里右击文档格式设置方式，选择Prettire - Code fomatter
5.鼠标右击 格式化文档 进行格式化
注意事项:
    格式化并不能将所有文件转换成eslint所需要的，个别需要手动微调