VSCode中Vue的components组件名标签无法快捷闭合

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

正文

在js文件中书写这样的模板时，能够像书写HTML文件时使用tab键自动补全html代码，即自动生成闭合标签。教程如下：

1. 依次打开 “文件 >> 首选项 >> 设置” 或者使用快捷方式：ctrl + shift + p 搜索“打开用户设置”

2. 在搜索栏中搜索 “settings.json”,点击图中红色圈中部分

3. 在配置文件中添加如下代码

    "emmet.triggerExpansionOnTab": true,
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always",
    "emmet.includeLanguages": {
        "javascript": "html"
    }
1
2
3
4
5
6
我的配置如下：

解释：
emmet.triggerExpansionOnTab：启用后，按下TAB键，将展开Emmet缩写
emmet.showAbbreviationSuggestions：将可能的Emmet缩写作为建议进行显示
emmet.showExpandedAbbreviation：将展开的Emmet缩写作为建议进行显示
emmet.includeLanguages：在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射
————————————————
版权声明：本文为CSDN博主「给我使劲宠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/coooookie/article/details/101447329