使用vscode時，如何在.vue文件中使用html代碼補全功能

最近在Vue大神的推薦下使用了vscode，還挺好用的，跟webstorm比起來要輕量不少，打開的速度也快，功能跟webstorm也差很少，挺豐富的，尤爲是插件。最主要的是使用過程當中，不會卡頓！！！這是重點！！！

那麼，使用的時候發現了在.vue的文件中，你只打一個div，在按tab鍵，是不會自動補全代碼的，想一想不會自動補全代碼，那得多浪費開發的時間，因而我就找到了一個解決辦法，請看下面：

1、HTML Snippets

在vscode中把這個插件下載了而且啓用，而後翻閱插件的ReadMe，咱們能夠看到以下圖得FAQ:

這段代碼是提示咱們須要在settings.json中配置files.associations的屬性。

2、settings.json中配置files.associations對象

首先，依次打開「文件 --> 首選項 --> 設置」，就會看到settings.json文件了

而後在settings.json中找到「經常使用設置」裏的files.associations對象

而後把鼠標滑到對象的左邊，會出現如圖所示的一個「編輯」的標誌，點擊它，就會打開編輯頁，如圖：

按照上圖的步驟去配置就能夠了，而後再回到.vue的頁面，打出div，再按住tab鍵，就能夠自動補全代碼了

能夠看到也出現了代碼提示功能，你能夠選擇一個本身想要的，也能夠不選，直接按住tab鍵，就能夠生成<div></div>了，以下圖：