安装了Vetur以后的配置

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

右侧写入：

 1 {  2     // 强制单引号
 3     "prettier.singleQuote": true,  4     // 尽量控制尾随逗号的打印
 5     "prettier.trailingComma": "all",  6     // 开启 eslint 支持
 7     "prettier.eslintIntegration": true,  8     // 保存时自动fix
 9     "eslint.autoFixOnSave": true, 10     // 添加 vue 支持
11     "eslint.validate": [ 12      "javascript", 13      "javascriptreact", 14  { 15       "language": "vue", 16       "autoFix": true
17  } 18  ], 19     // 使用插件格式化 html
20     "vetur.format.defaultFormatter.html": "js-beautify-html", 21     // 格式化插件的配置
22     "vetur.format.defaultFormatterOptions": { 23      "js-beautify-html": { 24       // 属性强制折行对齐
25       "wrap_attributes": "force-aligned"
26  } 27  }, 28     "vetur.format.defaultFormatter": { 29         "html": "prettier", 30         "css": "prettier", 31         "postcss": "prettier", 32         "scss": "prettier", 33         "less": "prettier", 34         "js": "prettier", 35         "ts": "prettier", 36         "stylus": "stylus-supremacy"
37  }, 38     // html颜色高亮
39     "files.associations": { 40         ".eslintrc": "json", 41         "*.vue": "html"
42  }, 43     "emmet.syntaxProfiles": { 44         "javascript": "jsx", 45         "vue": "html", 46         "vue-html": "html"
47  } 48 }