VSCode .vue 文件 html css 无智能提示

在 VSCode v1.15.1 版本之后，.vue 文件输入 html css 不会智能提示，

那么需要通过 VSCode 插件安装 HTML Snippets 或者 vetur 插件。

然后找到 VSCode 设置里面的 settings.json， 直接搜索这个文件即可。

打开 settings.json 配置

{
    "workbench.sideBar.location": "left",
    "window.zoomLevel": -1,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "emmet.triggerExpansionOnTab": true
}

我这边打开之后默认是上面这样的

然后添加配置:

{
   "emmet.triggerExpansionOnTab": true,
   "emmet.includeLanguages": {
       "vue-html":"html",
       "vue":"html"
    },
    "files.associations": {
       "*.vue": "html"
    }
}

最终显示：

{
    "workbench.sideBar.location": "left",
     "window.zoomLevel": -1,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "vue-html":"html",
        "vue":"html"
    },
    "files.associations": {
        "*.vue": "html"
    } 
}

安装插件且配置好之后就可以去 .vue 文件中编写 html css 了且都会带智能提示。

补充：还有个问题就是在使用 VSCode 创建了 .vue 文件之后，Vue 的插件，比如 vue，vue-beautify，vue-color，VueHelper，vertur 等等，可能会在 .vue 文件中使用无效，那么你需要修改一下 VSCode 右下角的文件类型。

.vue文件显示为html类型

它显示的类型竟然是 html，那么你需要点击它，在弹出的框中修改为 Vue 即可。