node动态生成html是运行时程序化操作，需用fs写入文件、模板插值及路径处理，而vscode的!+tab仅为编辑器静态补全；emmet无法读取外部数据或执行逻辑，批量生成必须依赖脚本。
Node 环境下动态生成 HTML 页面，和 VSCode 里敲 ! + Tab 是两回事——前者是运行时生成（比如构建阶段、服务端渲染、批量产出静态页），后者只是编辑器层面的代码片段补全。如果你已经装了 Node，想让 HTML 不再靠手敲或 Emmet，而是根据配置数据自动拼出来，那核心不在 VSCode 设置，而在你写的脚本逻辑。
为什么不能只靠 VSCode 的 Emmet 或代码片段？
Emmet 和用户代码片段（html.json）本质是「静态模板补全」，不读取外部数据，也不执行逻辑。比如你有一组产品信息存在 config.json 里，要生成 20 个带不同标题、描述、图片路径的页面——这种需求，! 键按 20 次也没用，必须走程序化生成。
用 Node 脚本读配置 + 拼 HTML 字符串最直接
不需要框架，几行 fs 和字符串模板就能跑起来。关键点就三个：
-
fs.writeFileSync()写文件，路径必须是.html后缀，VSCode 才能正确识别语法和预览 - 模板里用
${}插值时，注意转义双引号、换行符；如果字段含 HTML 片段（如用户输入的富文本），得手动做escape，否则 XSS 风险 - 生成前最好先
fs.mkdirSync(dir, { recursive: true })，避免因目录不存在导致写入失败
示例（gen.js）：
const fs = require('fs');
const config = require('./products.json'); // [{ id: 'p1', title: '耳机', desc: '降噪' }]
<p>config.forEach(item => {
const html = <code><!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>${item.title}</title></head> <body><h1>${item.title}</h1><p>${item.desc}</p></body> </html></code>;
fs.writeFileSync(<code>dist/${item.id}.html</code>, html);
});</p>
用 EJS / Handlebars 等模板引擎更安全可控
纯字符串拼接容易出错，尤其嵌套结构多、有循环或条件判断时。这时候引入轻量模板引擎是合理选择：
-
ejs：语法接近 JS，写逻辑，输出已转义内容，输出未转义（慎用） -
handlebars：逻辑完全剥离，靠预编译 + 数据对象驱动，天然防 XSS，但写复杂逻辑不如 EJS 直观 - 注意：VSCode 默认不识别
.ejs或.hbs文件的 HTML 语法高亮，需装对应扩展（如「EJS language support」）
例如用 ejs：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
npm install ejs
模板 template.ejs：
<title></title>
脚本中调用：
const ejs = require('ejs');
const html = ejs.renderFile('template.ejs', { title: '首页', content: '<p>欢迎</p>' });
生成后怎么在 VSCode 里预览？别依赖 Live Server 自动刷新
Live Server 插件默认只监听已存在的文件变化，对脚本新生成的 .html 文件不会自动加载——除非你把它放在已开启 Live Server 的根目录下，且脚本执行完后手动刷新浏览器。
- 更可靠的做法：生成脚本末尾加一句
console.log('✅ 已生成 dist/index.html，可打开 http://127.0.0.1:5500/dist/index.html') - 或者用
open包自动唤起浏览器：require('open')('http://127.0.0.1:5500/dist/index.html') - 注意：Live Server 默认端口是 5500，如果被占，它会换端口，但控制台输出的地址未必实时同步到你的脚本里——所以别硬编码 URL
真正容易被忽略的是路径问题：Node 脚本里的相对路径（如 ./config.json）以当前工作目录为准，不是 VSCode 打开的文件夹根目录。执行前务必确认 cd 到项目根，或用 path.resolve(__dirname, 'config.json') 显式定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
