image

在使用 VSCode 開發 Vue3 + TS 項目時，編輯器一直有一個報錯，因為不影響編譯和運行，所以就一直沒在意，但這兩天看著這紅杠提示實在是太別扭，今天就來解決一下這個問題，還自己一個清爽的開發環境。

在網上查找了很多資料，靠譜的不好找，但是功夫不負有心人，最終問題還是解決了，在這里記錄一下，避免日后踩坑，也給有需要的朋友省點查找資料的麻煩。

報錯信息

具體的報錯信息如下圖所示：

image-20210928193040954

找不到 .vue 的聲明文件，實際上就是 TS 無法識別 .vue 類型的文件。

那么就需要添加一下 .vue 類型文件的聲明，步驟如下：

1. 在根目錄（也就是 tsconfig.json這一級）下新建名為 ”vue.d.ts“ 的文件。文件名中的 ”vue“ 也可以改為任一名稱。

2. 在 ”vue.d.ts“ 文件中寫入以下聲明：

   // 以下兩種方案二選一
   
   // 方案一
   declare module "*.vue" {
     import Vue from "vue";
     export default Vue;
   }
   
   // 方案二
   declare module '*.vue' {
     import { defineComponent } from 'vue'
     const Component: ReturnType<typeof defineComponent>
     export default Component
   }
   

3. 在 ”tsconfig.json“ 中，將第二步中創建的文件 ”vue.d.ts“（或者你自己新建的其他名稱的 .d.ts 文件）添加到 include 中：

   "include": [
      "vue.d.ts"
   ],
   

   我這邊完整的 include 屬性如下（我新建的是 ”app.d.ts“）：

   image-20210928201121606

結果

最后，我們來看一下 VSCode 中是否還有紅杠報錯：

image-20210928201258754

報錯信息沒有了，大功告成！

總結

一個清爽的開發環境有助于我們保持身心愉悅，自然而然也就提高了工作效率，沒有紅杠的代碼看著果然舒服多了！

~

~本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！

你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以余韻相贈！

知識與技能并重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！