快捷導(dǎo)航

圖文詳解Vue3沒(méi)有代碼提示問(wèn)題的解決辦法

更新時(shí)間：2023年01月16日 15:39:21 作者：尋夢(mèng)編碼

最近在使用Vue.js時(shí)候沒(méi)有自動(dòng)提示,就很難受,下面這篇文章主要給大家介紹了關(guān)于Vue3沒(méi)有代碼提示問(wèn)題的解決辦法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

在上一篇筆記中提到了Vue3+vite+Ts寫(xiě)代碼過(guò)程中，出現(xiàn)的代碼自動(dòng)補(bǔ)全失效功能，今天來(lái)談?wù)勅绾谓鉀Q這個(gè)問(wèn)題。

首先，我們已經(jīng)很明確的就是安裝了volar插件之后，HTML標(biāo)簽片段補(bǔ)全已經(jīng)失效，即在template中書(shū)寫(xiě)HTML標(biāo)簽時(shí)，不會(huì)再有代碼補(bǔ)全，即輸入“div”，就是“div”，而不再是“<div></div>”，為了解決這個(gè)問(wèn)題，我們需要在不刪除volar插件的同時(shí)，對(duì)Vscode做一些配置。

打開(kāi)設(shè)置，進(jìn)入到如下界面：

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

但是此時(shí)也產(chǎn)生了一些問(wèn)題，不知道大家有沒(méi)有接觸到，如果沒(méi)有的話就可以略過(guò)了。

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

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

雖然代碼很簡(jiǎn)單，但每次新建一個(gè)組件時(shí)都需要書(shū)寫(xiě)還是比較繁瑣的，因此我們會(huì)新建一些自定義的代碼片段，在用戶代碼片段中，點(diǎn)擊vue.json即可新建自己的代碼片段

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

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

但是在經(jīng)過(guò)上述的配置后，我的代碼片段失效了，此時(shí)的一個(gè)解決方法就是，新建一個(gè)自己的全局代碼片段。

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

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

第二個(gè)產(chǎn)生的問(wèn)題就是，在經(jīng)過(guò)最上面的配置后，.vue文件的圖標(biāo)都變成了HTML文件的圖標(biāo)，出現(xiàn)這樣的情況大家也不要慌，如果不介意的話其實(shí)也可以不用管的，但是為了區(qū)分，建議還是下載一個(gè)新的圖標(biāo)插件