In VSCode, TS prompts "Cannot find *.vue declaration file" solution

When using VSCode to develop a Vue3 + TS project, the editor has always reported an error, because it does not affect the compilation and operation, so I have not cared about it, but it is really awkward to look at the red bar prompt in the past two days. Let’s solve it today. This problem, but also a refreshing development environment.

I have searched a lot of information on the Internet. It is not easy to find, but the hard work has paid off. The problem is solved in the end. Record it here to avoid stepping on pits in the future, and save the trouble of searching for information for friends in need.

Error message

The specific error message is shown in the figure below:

The declaration file of .vue cannot be found. In fact, TS cannot recognize the file of .vue type.

Then you need to add a declaration of the .vue type file, the steps are as follows:

1. Create a new file named "vue.d.ts" in the root directory (that is, at the tsconfig.json level). The "vue" in the file name can also be changed to any name.

2. Write the following statement in the "vue.d.ts" file:

   // 以下两种方案二选一
   
   // 方案一
   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. In "tsconfig.json", add the file "vue.d.ts" created in the second step (or your own new .d.ts file with other names) to include:

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

我这边完整的 include 属性如下（我新建的是 ”app.d.ts“）：

![image-20210928201121606](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b8f12556b1c4dd88a5bebda72a08576~tplv-k3u1fbpfcp-zoom-1.image)

result

Finally, let's see if there are any red bars in VSCode:

The error message is gone, and you're done!

Summarize

A refreshing development environment helps us keep our mind and body happy, and naturally improves work efficiency. Code without red bars looks much more comfortable!

~

~ End of this article, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and create interesting souls!

Hello everyone, I am , the author Programming Samadhi Hermit King , and my is "1615311e31bb2c Programming Samadhi ", welcome to pay attention, I hope you can give me your advice!

Come, with expectations, I have Moxiang to greet you! You return, no matter the gains or losses, only with the lingering rhyme as a gift!

Pay equal attention to knowledge and skills, both internal and external skills, both theory and practice must be grasped, and both hands must be hard!