安装了Vetur之后的配置

VSCode本身自带了Emmet，能够通过Tab键对HTML5的代码进行快速开发，不过，VSCode中需要修改Emmet配置才能对Vue进行支持。打开文件->首选项->设置，就会进入到 settings.json 文件中，在左侧是VSCode默认的配置，在窗口右侧就可以进行一系列的配置：

右侧写入：

{
    // 强制单引号
    "prettier.singleQuote": true,
    // 尽可能控制尾随逗号的打印
    "prettier.trailingComma": "all",
    // 开启 eslint 支持
    "prettier.eslintIntegration": true,
    // 保存时自动fix
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
     "javascript",
     "javascriptreact",
     {
      "language": "vue",
      "autoFix": true
     }
    ],
    // 使用插件格式化 html
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 格式化插件的配置
    "vetur.format.defaultFormatterOptions": {
     "js-beautify-html": {
      // 属性强制折行对齐
      "wrap_attributes": "force-aligned"
     }
    },
    "vetur.format.defaultFormatter": {
        "html": "prettier",
        "css": "prettier",
        "postcss": "prettier",
        "scss": "prettier",
        "less": "prettier",
        "js": "prettier",
        "ts": "prettier",
        "stylus": "stylus-supremacy"
    },
    // html颜色高亮
    "files.associations": {
        ".eslintrc": "json",
        "*.vue": "html"
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    }
}