一、方法一

1、Ctrl+shift+p打开命令面板

输入：

preferences:Open Settings(JSON);

2、在setting.json中添加

"files.associations": {
        "*.vue": "html"
    }

解决失效问题

方法二

假如上面解决不了，尝试第二种方案，这个问题我也好久没印象了，如有不正确请指出，谢谢。

1、打开设置

vscode编辑器的左下角点击设置图标，然后点击设置选项

2、修改settings.json内容

在搜索框中搜索 font ligatures, 然后选择 在settings.json 中编辑

3、添加或修改内容

在 files.associations 中添加如下代码， “*.vue”: "html"即可。

博主的 settings.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"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "git.confirmSync": false,
    "editor.wordWrap": "on",
    "explorer.confirmDelete": false,
    "editor.fontLigatures": false
}

4、测试