在上一篇筆記中提到了Vue3+vite+Ts寫代碼過程中，出現的代碼自動補全失效功能，今天來談談如何解決這個問題。

首先，我們已經很明確的就是安裝了volar插件之后，HTML標簽片段補全已經失效，即在template中書寫HTML標簽時，不會再有代碼補全，即輸入“div”，就是“div”，而不再是“<div></div>”，為了解決這個問題，我們需要在不刪除volar插件的同時，對Vscode做一些配置。

打開設置，進入到如下界面：

 選擇 文本編輯器 -> 文本 -> ，點擊右面第一個，添加項，項輸入：“*.vue” ，值輸入："html"，點擊保存后回到vue文件中，任何輸入HTML標簽，發(fā)現已經可以自動補全代碼了，而且是自閉和的。

但是此時也產生了一些問題，不知道大家有沒有接觸到，如果沒有的話就可以略過了。

第一：自定義的代碼片段失效了，我們平時在新建Vue3組件的時候，需要初始化模板

  <template>
 
</template>
 
<script setup lang='ts'>
import {ref,reactive} from 'vue'
 
</script>
 
<style lang='less' scoped> 
 
</style>

雖然代碼很簡單，但每次新建一個組件時都需要書寫還是比較繁瑣的，因此我們會新建一些自定義的代碼片段，在用戶代碼片段中，點擊vue.json即可新建自己的代碼片段

如何創(chuàng)建自己的代碼片段這里就不展開細講了，相關的教程有很多，而且非常簡單。

代碼片段創(chuàng)建完成后，只需要輸入關鍵詞就可以創(chuàng)建整個片段了，還是非常方便的。

但是在經過上述的配置后，我的代碼片段失效了，此時的一個解決方法就是，新建一個自己的全局代碼片段。

點擊“新建全局代碼片段文件”，然后輸入文件的名字，然后就可以自定義代碼片段了，方法和在已有的.json文件中定義代碼片段的方法一樣。

配置完成后，新建一個.vue文件，輸入自定義的代碼提示詞，如我的是vue3,回車，就生成了代碼片段。

 第二個產生的問題就是，在經過最上面的配置后，.vue文件的圖標都變成了HTML文件的圖標，出現這樣的情況大家也不要慌，如果不介意的話其實也可以不用管的，但是為了區(qū)分，建議還是下載一個新的圖標插件

 因為之前我裝的是scode-icon這個插件，所以配置完成后圖標會發(fā)生變化，此時我們可以重裝一個，比如我裝的是vue Theme

安裝完成之后即可發(fā)現文件的圖標發(fā)生了變化，當然了，安裝其他的icon組件也是可以的，看自己喜好哈

總結

到此這篇關于Vue3沒有代碼提示問題解決的文章就介紹到這了,更多相關Vue3沒有代碼提示問題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論