VSCode 最新版本 Vue代码自动格式化

开始配置代码自动格式化，首先要确保已经安装了 ESLlint、Vetur、Prettier 这三个插件。然后配置 settings.json 其配置如下：

{
  "workbench.colorTheme": "Monokai",
  "files.autoSave": "onFocusChange",
  "editor.fontSize": 14, // 设置字体
  "editor.tabSize": 2, // 设置tab位2个空格，设置后在页面可查看.
  "editor.tabCompletion": "on", // 用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true // 这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列
  },
  "editor.lineNumbers": "on", // 设置代码行号
  "editor.formatOnSave": true,
  "explorer.confirmDelete": false,
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // - auto: 仅在超出行长度时才对属性进行换行
      // - force: 对除第一个属性外的其他每个属性进行换行
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐
      // - force-expand-multiline: 对每个属性进行换行
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
      // #vue组件中html代码格式化样式
      "wrap_attributes": "aligned-multiple", //也可以设置为“auto”，效果会不一样
      "wrap_line_length": 180,
      // 是否在每行末尾添加分号
      "semi": false,
      "singleQuote": true
    },
    "prettier": {
      "semi": false,
      "singleQuote": true,
    },
    "prettyhtml": {
      "printWidth": 160,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "files.insertFinalNewline": true
}