vscode里面怎么一次性打出多个div

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 本身坏了。