vs code 中用 emmet 快速包裹代码需选中文本后执行“emmet: wrap with abbreviation”命令，如输入 p.text 得 hello；手动输入标签则依赖语言模式为 html/vue/jsx 且 html.autoclosingtag 开启，否则需插件辅助或正则替换。
用 Emmet 快速包裹代码（最常用场景）
VS Code 默认支持 Emmet，选中一段代码后输入 div、span 或任意 HTML 标签名，再按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），搜 “Emmet: Wrap with Abbreviation”，回车即可自动加标签。比如选中 hello，输入 p.text，会变成 <p class="text">hello</p>。
常见错误：直接敲 <div> 回车——这不会自动闭合，也不带 Emmet 的智能补全；必须走 Wrap 命令流程。<ul>
<li>确保光标在选中文本内，否则命令无效</li>
<li>如果没反应，检查是否禁用了 Emmet（<code>"emerald.emmet": true 在设置里默认开启）
ul>li*3 会生成三个 <li>
手动输入时怎么让 VS Code 自动补全闭合标签
只要文件类型识别为 html、vue、jsx 或启用了对应语言插件（如 JavaScript React），输入 <div> 后按 <code>Tab 或 Enter，VS Code 就会自动补成 <div></div> 并把光标放在中间。
容易踩的坑：plaintext 或 JSON 模式下不触发；.js 文件里写 JSX 默认不启用 HTML 补全，得装 Auto Close Tag 插件或改 language mode 为 JavaScript React。
立即学习“前端免费学习笔记（深入）”；
- 检查右下角语言模式是否是
HTML（不是Plain Text） -
"html.autoClosingTag": true必须为 true（默认开启） - JSX 中写
<div> 不自动闭合？试试装 <code>Auto Rename Tag插件辅助批量给多行文本加相同标签（比如每行一个
<p></p>）适合处理 Markdown 片段、日志输出、列表文本等。先用
。Alt+Click（Windows/Linux）或Option+Click（macOS）在每行开头添加多个光标，再统一输入<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1785" title="PNG Maker"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175680359673893.png" alt="PNG Maker" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1785" title="PNG Maker">PNG Maker</a> <p>利用 PNG Maker AI 将文本转换为 PNG 图像。</p> </div> <a href="/ai/1785" title="PNG Maker" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，然后按Ctrl+Shift+Alt+Right（Windows）跳到行尾，再输更稳的做法是用正则替换：
Ctrl+H→ 开启.*按钮 → 查找^(.*)$→ 替换为<p>$1</p>。注意$1是捕获组，别写成\1（PCRE 风格不生效）。- 正则替换前先
Ctrl+Shift+P→ “Select All Occurrences of Find Match” 确认范围 - 如果文本含换行或缩进，
^/$可能不匹配，改用([^\r\n]*) - VS Code 的替换正则不支持
/g标志，勾选.*即代表全局
为什么有些代码加了标签却没高亮或报错
多半是语言模式错了。比如在
.js文件里写了<div>hi</div>，但 VS Code 当前认为这是纯 JavaScript，不会解析 HTML 结构，所以不补全、不校验、不着色。解决方法很简单：点右下角语言模式，选
HTML、JavaScript React或Vue；或者在文件顶部加注释// @ts-check（对 TS/JS）或<!-- html -->（部分插件识别）。- 临时切换：按
Ctrl+K M，输入html回车 - 永久绑定：在
settings.json加"files.associations": {"*.js": "javascriptreact"} - 插件冲突时，禁用
Auto Close Tag和Auto Rename Tag再试原生功能
实际操作中最容易被忽略的是语言模式和 Emmet 是否真正激活——很多“不生效”问题，重启窗口或重开文件就能解决，而不是立刻去装插件。
- 正则替换前先
