在Vs code中使用vue的时候,默认是没有高亮显示的,通常我们都会通过下载插件的方式来解决问题,大部分的童鞋通过下载Vetur插件之后,问题都得到了解决,但也有一少部分人和我一样,下载了Vetur问题仍然存在
在我经过网上搜索问题处理方法后,最终得到了问题的解决方法,在此将解决方法分享给大家,供大家参考

步骤一:在Vs code中按 Ctrl+Shift+P调出以下界面
在这里插入图片描述

步骤二:
输入setting,打开Setting.json文件(首选项:打开设置(json))
在这里插入图片描述

{
 // 强制单引号
 "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"
 }
}

完成后样式
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐