vs code 默认支持 emmet，div*5 回车可生成5个div；若无效，多因语言模式错误或tab被劫持；支持$计数、{text}插值、[]属性；vue/jsx需正确语言模式；大量重复建议用js生成。
用 Emmet 快速生成多个 div
VS Code 默认启用 Emmet，div*5 回车就能一次性输出 5 个 div。不用手敲、不装插件、不改设置——前提是没关掉 Emmet 或把 tab 键绑定给其他功能。
常见错误现象：div*5 按 Tab 没反应，或只补全成单个 div；可能因为：
- 当前文件类型未被识别为 HTML/JSX/HTML-like（比如文件后缀是
.txt或没设语言模式） -
tab键被其他扩展劫持（如 Prettier、Auto Rename Tag） - Emmet 触发方式被改成
Enter而非Tab（查设置：emmet.triggerExpansionOnTab是否为true）
怎么让每个 div 带不同 class 或内容
Emmet 支持嵌套和属性展开，比纯重复更实用。比如要生成带序号 class 的 div：
div.item$*3
会输出：
<div class="item1"></div> <div class="item2"></div> <div class="item3"></div>
关键点：
-
$表示计数器，$$补零（如item$$→item01） -
{text}插入文本：div.item$*2{Item $}→<div class="item1">Item 1</div> - 属性必须用方括号：
div[role="region"]*2
在非 HTML 文件里（如 .vue、.jsx）也生效吗
可以，但得确保语言模式正确。VS Code 会根据文件后缀自动设语言模式，但有时会错判（比如打开一个无后缀的模板片段，语言模式可能是 Plain Text）。
检查和修复方法：
- 右下角看状态栏，点击当前语言标签（如
Plain Text），选HTML/Vue/JavaScript React - Vue 单文件组件中，
<template></template>区域默认支持 Emmet；<script></script>区域不支持（除非写 JSX） - JSX 中需用
div而非div*—— Emmet 在 JSX 里对乘法语法支持不稳定，建议切到HTML模式临时写再复制
为什么有时候 div*100 卡顿或只出 10 个
不是 bug，是 VS Code 的 Emmet 内置限制：emmet.variables["snippets.maxRepeatCount"] 默认为 100，但部分旧版或自定义配置可能压低了这个值。
如果真需要大量生成（比如 mock 数据容器），更稳的做法是：
- 用 JS 快速生成字符串：
Array.from({length: 50}, (_, i) => `<div class="item${i + 1}"></div>`).join('\n')，粘贴进编辑器 - 避免依赖 Emmet 生成超长结构——它本质是语法补全，不是代码生成器
- 注意：大数量重复 + 自动格式化（Prettier）可能触发卡顿，可先禁用格式化再粘贴
真正容易被忽略的是语言模式和 tab 绑定这两处——90% 的“不生效”问题都卡在这儿，而不是 Emmet 本身坏了。
