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 文件中测试输入 <div> 后按回车或键入 </，观察是否自动补全 </div>。
二、启用内置 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 文件，输入 <p>，随后直接输入 </，编辑器将自动显示 </p> 并可按 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 文件中输入 <section>，随后键入 </，验证是否出现自动补全建议。
四、为 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 文件中输入 <div>，随后键入 </ 即可触发闭合提示。
