VSCode的Auto Close Tag:HTML/XML开发者的福音

14次阅读

未启用auto Close Tag扩展会导致html/xml结束标签需手动输入,应安装Jun Han开发的Verified插件,配置autoCloseTag.activationOnLanguage为[“html”,”xml”],禁用editor.autoClosingTags,调整Prettier与Emmet设置,并在settings.json中启用sublimeTextMode及enableAutoCloseTagWithOutSelect。

VSCode的Auto Close Tag:HTML/XML开发者的福音

如果您在使用 vscode 编写 HTML 或 XML 代码时,频繁手动输入结束标签,导致效率下降或标签嵌套错位,则可能是未启用或未正确配置 Auto Close Tag 扩展。以下是启用与优化该功能的具体操作步骤:

本文运行环境:macBook air,macOS Sequoia。

一、安装 Auto Close Tag 扩展

Auto Close Tag 并非 VSCode 内置功能,需通过扩展市场安装官方认证的插件以实现自动闭合标签能力。

1、打开 VSCode,点击左侧活动栏中的扩展图标(四个方块组成的图标)。

立即学习前端免费学习笔记(深入)”;

2、在扩展搜索框中输入 Auto Close Tag

3、在搜索结果中找到作者为 Jun Han 的扩展,确认其标识为 Verified Publisher。

4、点击“安装”按钮,等待安装完成。

二、启用 HTML/XML 自动闭合规则

该扩展默认仅对部分语言启用,需手动配置以确保在 HTML 和 XML 文件中生效。

1、按下 Cmd + ,(macos)打开设置界面。

2、在右上角搜索框中输入 autoCloseTag.activationOnLanguage

3、点击编辑按钮,在数组中添加 html“xml” 两项。

4、保存设置后重启 VSCode 窗口。

三、禁用与其他扩展的冲突行为

部分格式化扩展(如 Prettier)可能覆盖 Auto Close Tag 的自动插入逻辑,需调整优先级或关闭冗余功能。

1、进入设置界面,搜索 editor.autoClosingTags

2、将内置的 VSCode 标签自动闭合选项设为 false,避免双重触发。

3、在设置中搜索 prettier.bracketSameLine,确认其值不强制修改标签换行结构。

4、检查已启用的 Emmet 相关设置,确保 emmet.triggerExpansionOnTab 未干扰标签补全流程。

四、自定义闭合触发条件

可通过修改用户设置 json,精确控制哪些字符触发闭合行为,提升编码精准度。

1、按下 Cmd + Shift + P,输入并选择“Preferences: Open Settings (JSON)”。

2、在 settings.json 中添加如下键值对

“auto-close-tag.SublimeTextMode”: true

“auto-close-tag.enableAutoCloseTagWithOutSelect”: true

3、保存文件后,输入

后直接按空格或 > 即可生成完整闭合结构。

text=ZqhQzanResources