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

正文

2021/9/20更新：评论里有提到没有代码提示和语法高亮，后来才发现有现成的插件可以使用，该插件实现原理就是通过匹配特定规则的字符串，再将里面的内容识别为指定语言

插件：comment-tagged-templates

效果：

在自己写代码时还需要写前面的注释字段，建议各位老铁添加自定义代码片段
打开编辑器>文件>首选项>用户代码片段>输入要创建的代码类型（比如js、ts等等）>会生成一个json文件。
该json文件规则老铁们自行找vscode官网查看，我这里展示一下我自己的设置

这样在写代码时就会有代码提示了

以下是原文可忽略

在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"
    }

我的配置如下：

解释：

• emmet.triggerExpansionOnTab：启用后，按下TAB键，将展开Emmet缩写
• emmet.showAbbreviationSuggestions：将可能的Emmet缩写作为建议进行显示
• emmet.showExpandedAbbreviation：将展开的Emmet缩写作为建议进行显示
• emmet.includeLanguages：在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射