VSCode中实现HTML/JSX自动闭合标签需启用Auto Close Tag扩展、开启内置html.autoClosingTag设置、配置settings.json或为JSX/TSX文件关联语言模式。
如果您在使用 VSCode 编写 HTML 或 JSX 代码时，需要频繁手动输入结束标签，可能导致效率下降和语法错误，则可能是由于未启用或未正确配置自动闭合标签功能。以下是实现该功能的多种方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Auto Close Tag 扩展
Auto Close Tag 是一个轻量级扩展，专为 HTML、XML、Vue、JSX 等标记语言设计，可自动插入匹配的结束标签。它不依赖其他插件，独立运行且响应迅速。
1、打开 VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
立即学习“前端免费学习笔记（深入）”；
2、在扩展搜索框中输入 Auto Close Tag。
3、在搜索结果中找到作者为 Jun Han 的扩展，确认名称完全匹配。
4、点击“安装”按钮，等待安装完成。
5、安装后无需重启，立即生效；可在新创建的 .html 文件中测试输入
二、启用内置 HTML 自动闭合功能
VSCode 自带的 HTML 语言支持已集成基础自动闭合能力，无需额外扩展即可触发，但需确保相关设置已开启。
1、按下 Cmd + ,（macOS）打开设置界面。
2、在右上角搜索框中输入 html.autoClosingTag。
3、勾选 HTML › Auto Closing Tag 选项。
4、同时检查 HTML › Suggest: Html Tags 和 Editor › Quick Suggestions › Other 是否均已启用。
5、新建一个 .html 文件，输入
，随后直接输入 ，编辑器将自动显示
并可按 Tab 或 Enter 插入。三、配置 settings.json 手动启用
当图形化设置界面无法定位选项，或需批量管理多个语言行为时，可通过直接编辑配置文件精确控制自动闭合逻辑。
1、按下 Cmd + Shift + P 打开命令面板。
2、输入并选择 Preferences: Open Settings (JSON)。
3、在大括号 {} 内添加如下代码段：
"html.autoClosingTag": true,
"emeraldwalk.runonsave": {"commands": [{"match": "\\.html$","cmd": "echo 'ready'"}]}
4、保存文件（Cmd + S），VSCode 会自动重新加载配置。
5、在 HTML 文件中输入
四、为 JSX/TSX 文件启用闭合支持
React 开发者常需在 .jsx 或 .tsx 文件中编写标签，而默认情况下 Auto Close Tag 扩展可能不自动激活，需显式声明语言关联。
1、按下 Cmd + , 进入设置界面。
2、搜索 autoClosingTags，找到对应于 Files: Associations 的设置项。
3、点击右侧“编辑 in settings.json”链接。
4、在 settings.json 中添加以下映射：
"files.associations": {
"*.jsx": "javascriptreact",
"*.tsx": "typescriptreact"
},
"auto-close-tag.SublimeTextMode": false
5、保存后，在任意 .jsx 文件中输入
