以下解決辦法如不生效，可嘗試 重啟
vscode
一海铆、Vetur插件檢測(cè)問題
-
vetur是一個(gè)vscode插件迹恐，用于為.vue單文件組件提供代碼高亮以及語(yǔ)法支持。 - 但
vue以及vetur對(duì)于ts的支持卧斟，并不友好殴边。
1憎茂、原因
- 如下圖：鼠標(biāo)放到紅色波浪線處，出現(xiàn)提示小框锤岸，箭頭所指有
Vetur關(guān)鍵字竖幔，說(shuō)明是這個(gè)插件的語(yǔ)法檢測(cè)問題。
image.png
2是偷、解決方法
- 禁用
Vetur插件 - 安裝
Vue-Official插件拳氢，原名Volar - 兩個(gè)插件若同時(shí)存在，會(huì)沖突蛋铆，若都不存在馋评，則不會(huì)進(jìn)行語(yǔ)法檢測(cè)
注意: 安裝這個(gè)插件時(shí)，當(dāng)前工作區(qū)如果是V3的項(xiàng)目戒职，還是要 “禁用” Vetur 以避免沖突栗恩。同理，要是工作區(qū)V2的洪燥，最好也 “禁用” Vue-Official磕秤。
二、ts 不識(shí)別導(dǎo)入報(bào)錯(cuò)的問題
1捧韵、原因
- 如下圖：鼠標(biāo)放到紅色波浪線處市咆，出現(xiàn)提示小框，箭頭所指有
ts關(guān)鍵字再来，說(shuō)明是TS未識(shí)別到相應(yīng)函數(shù)蒙兰。
image.png
-
TS未識(shí)別到相應(yīng)函數(shù)的原因：項(xiàng)目使用了自動(dòng)導(dǎo)入插件unplugin-auto-import，且 沒有相應(yīng)的模塊聲明文件
2芒篷、解決方法
（1）第一種情況
- 在
tsconfig.json中引入auto-imports.d.ts文件 -
*.d.ts表示所有的.d.ts文件 - 需滿足
tsconfig.json和auto-imports.d.ts文件都在
項(xiàng)目根目錄搜变， - 若不滿足，視情況在
tsconfig.json中修改
// tsconfig.json
{
"include": [
"*.d.ts",
],
}
（2）第二種情況
- 如果
tsconfig.json中內(nèi)容如下：
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
- 則在
tsconfig.app.json中引入auto-imports.d.ts文件 -
*.d.ts表示所有.d.ts文件
// tsconfig.app.json
{
"include": [
"*.d.ts",
],
}
image.png
（3）第三種情況
- 若以上兩種都不滿足针炉，查看博文 Vue3+Vite項(xiàng)目按需自動(dòng)導(dǎo)入配置以及一些常見問題修復(fù)
- 找到如下圖所在位置挠他，后面有解決方法說(shuō)明
image.png
