安裝了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 }