mac版本vscode在.vue文件中template标签没有html标签提示

小咪咪 2023-10-06 23:32 18阅读 0赞

最近在学习vue时，看到网课老师在书写template时，html代码具有自动闭合标签的功能，然后自己在网上找了许多教程，发现这样的文章很少，自己就琢磨了下，才写了这篇博客供大家参考

1. 使用快捷方式：ctrl + shift + p 搜索“打开用户设置”  
2. 在搜索栏中搜索 “settings.json”,

![4c8f24ea870e41548bf514cd2de904bb.png][]

**3.只需加入以下代码：**

"files.associations": {
        "*.vue": "html"
    }

**4.如图：**

![1c2a73665de147449d6ad5febdbd86b5.png][]

保存返回即可

![13f5445d82f44e1598ce4f1a5595a548.png][]

但是此时如果在vue中写ts代码就会报错：

Type aliases can only be used in TypeScript files.

尴尬。。。。。

这时候试试在script中加入 lang="ts"，重启看看

![86a2bc52cfd34a7c881a1c997095879a.png][]

如果不行，就返回到setting中，把刚才的配置注释掉，哈哈哈哈

"files.associations": {
        "*.vue": "html"
    }

![d9741b4e27f347a08003ecb38a59a989.png][]

再返回到vue中：

神奇的事情出现了，标签可以自动补全了，吐血.......也不知道vscode犯什么大病

![7fba46765f3f42b39bfb3b9860c6bb30.png][]

[4c8f24ea870e41548bf514cd2de904bb.png]: https://img-blog.csdnimg.cn/4c8f24ea870e41548bf514cd2de904bb.png
[1c2a73665de147449d6ad5febdbd86b5.png]: https://img-blog.csdnimg.cn/1c2a73665de147449d6ad5febdbd86b5.png
[13f5445d82f44e1598ce4f1a5595a548.png]: https://img-blog.csdnimg.cn/13f5445d82f44e1598ce4f1a5595a548.png
[86a2bc52cfd34a7c881a1c997095879a.png]: https://img-blog.csdnimg.cn/86a2bc52cfd34a7c881a1c997095879a.png
[d9741b4e27f347a08003ecb38a59a989.png]: https://img-blog.csdnimg.cn/d9741b4e27f347a08003ecb38a59a989.png
[7fba46765f3f42b39bfb3b9860c6bb30.png]: https://img-blog.csdnimg.cn/7fba46765f3f42b39bfb3b9860c6bb30.png