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

发布时间 - 2026-01-04 00:00:00    点击率:
未启用Auto Close Tag扩展会导致HTML/XML结束标签需手动输入,应安装Jun Han开发的Verified插件,配置autoCloseTag.activationOnLanguage为["html","xml"],禁用editor.autoClosingTags,调整Prettier与Emmet设置,并在settings.json中启用SublimeTextMode及enableAutoCloseTagWithOutSelect。

如果您在使用 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、保存文件后,输入 后直接按空格或 > 即可生成完整闭合结构。


# vscode  # html  # sublime  # js  # json  # 编码  # macbook  # mac  # ai  # macos  # cos  # 键值对  # xml  # auto  # 按下  # 框中输入  # 运行环境  # 设为  # 并在  # 自定义  # 您在  # 搜索结果  # 可通过  # 则可 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: iOS中将个别页面强制横屏其他页面竖屏  如何在建站主机中优化服务器配置?  Laravel的辅助函数有哪些_Laravel常用Helpers函数提高开发效率  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  在线制作视频的网站有哪些,电脑如何制作视频短片?  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  如何在局域网内绑定自建网站域名?  公司门户网站制作流程,华为官网怎么做?  Laravel如何配置任务调度?(Cron Job示例)  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  企业在线网站设计制作流程,想建设一个属于自己的企业网站,该如何去做?  Python制作简易注册登录系统  如何快速配置高效服务器建站软件?  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  微信公众帐号开发教程之图文消息全攻略  如何快速搭建自助建站会员专属系统?  Laravel storage目录权限问题_Laravel文件写入权限设置  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  html如何与html链接_实现多个HTML页面互相链接【互相】  如何用搬瓦工VPS快速搭建个人网站?  什么是javascript作用域_全局和局部作用域有什么区别?  标题:Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  百度浏览器如何管理插件 百度浏览器插件管理方法  网站优化排名时,需要考虑哪些问题呢?  北京的网站制作公司有哪些,哪个视频网站最好?  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买?  Linux网络带宽限制_tc配置实践解析【教程】  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  Laravel如何实现API版本控制_Laravel版本化API设计方案  详解阿里云nginx服务器多站点的配置  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  Laravel如何使用Contracts(契约)进行编程_Laravel契约接口与依赖反转  Laravel怎么判断请求类型_Laravel Request isMethod用法  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  nodejs redis 发布订阅机制封装实现方法及实例代码  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站?  JS碰撞运动实现方法详解  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  香港服务器租用每月最低只需15元?  如何用虚拟主机快速搭建网站?详细步骤解析  如何在阿里云虚拟服务器快速搭建网站?  Internet Explorer官网直接进入 IE浏览器在线体验版网址  阿里云高弹*务器配置方案|支持分布式架构与多节点部署  如何在不使用负向后查找的情况下匹配特定条件前的换行符  Laravel模型事件有哪些_Laravel Model Event生命周期详解  Laravel如何优化应用性能?(缓存和优化命令)  如何有效防御Web建站篡改攻击?  如何彻底删除建站之星生成的Banner?