Live Server 打开 .ejs 文件只显示源码是设计使然，因其仅为静态 HTTP 服务，不执行 ejs.render()；需用 Express + ejs 搭建服务端渲染环境才能正确解析并展示 HTML。
Live Server 打开 .ejs 文件只显示源码，不是 bug 是设计
VS Code 本身不执行 EJS 或 Pug，它只是编辑器。Live Server 启动的是纯静态 HTTP 服务，不会调用 ejs.render() 或 pug.render() —— 所以浏览器看到的必然是原始模板代码，甚至可能触发下载。
常见错误现象：Cannot GET /、页面显示 原样、右键“Open with Live Server”后浏览器一片空白或弹出下载框。
- 别试图让 Live Server 渲染模板：它不支持任何服务端逻辑，也不加载 Node.js 环境
- Live Server 只适合托管
public/下已构建好的 HTML/CSS/JS，比如你用脚本把index.ejs渲染成dist/index.html后，再用 Live Server 打开 dist 目录 - 若想边写边看效果，必须走真实服务端流程：Express + ejs 或 Express + pug，搭配
nodemon实现文件变更自动重启
Express + EJS 的最小可运行配置（无多余依赖）
要让 index.ejs 在浏览器里真正渲染成 HTML，你得启动一个能执行 ejs.renderFile() 的服务。Express 是最轻量且与 EJS 原生兼容的选择。
关键点不是“装多少包”，而是目录结构和 app.set() 的顺序是否正确：
立即学习“前端免费学习笔记（深入）”；
- 项目根目录下建
views/文件夹，把index.ejs放进去（不能放在根目录或src/下） - 在
app.js中严格按顺序写：app.set('views', './views')→app.set('view engine', 'ejs')→app.set('view engine', 'html')这行不要加，EJS 不需要它 -
res.render('index')会自动找views/index.ejs；写成res.render('index.ejs')会报错 - 静态资源（CSS/JS）放
public/，用app.use(express.static('public'))挂载，路径是相对public/的，比如public/css/style.css对应/css/style.css
Pug 模板需额外配 prettier-plugin-pug 才能安全格式化
Pug 的缩进敏感性和混合语法（JavaScript + 模板指令）会让默认的 Prettier 直接崩溃或破坏结构。直接启用 Prettier 格式化 .pug 文件，大概率导致 unexpected token 或渲染失败。
必须分三步走通格式化链路：
- 安装
prettier-plugin-pug：运行npm install --save-dev prettier-plugin-pug（注意是--save-dev，不是全局） - 在项目根目录的
.prettierrc中声明插件：{"plugins": ["prettier-plugin-pug"]} - VS Code 设置中指定 Prettier 为默认格式化工具，并确保当前文件语言模式是
Pug（右下角点击切换，不是Plain Text或HTML） - 禁用其他模板类插件（如 EJS 相关扩展），它们会抢语言服务控制权，导致 Pug 补全失效
EJS 文件在 VS Code 里没高亮、没 Emmet 补全？先看语言模式
VS Code 默认把 .ejs 当作纯文本，所以 div.container+Tab 不展开、<%= 没颜色、双击选不中标签对——这不是插件没装，是语言服务根本没激活。
修复只需两处 settings.json 配置，缺一不可：
-
"files.associations": { "*.ejs": "ejs" }：告诉 VS Code 用 EJS 语言服务处理所有 .ejs 文件 -
"emmet.includeLanguages": { "ejs": "html" }：让 Emmet 把 .ejs 当 HTML 解析，ul>li*3才能展开 - 必须安装
vscode-ejs-language-service（作者 DigitalBrainstem），旧版 “EJS Language Support” 已停更，不支持 VS Code 1.80+ 的语言服务器协议 - 改完设置后按
Ctrl+Shift+P→ 输入Developer: Reload Window，否则右下角语言模式仍显示 Plain Text
复杂点在于：EJS 混合了 HTML 结构和 JS 逻辑，格式化器、校验器、补全引擎必须各司其职。ESLint 不能校验 .ejs，Prettier 必须桥接专用插件，Emmet 要手动绑定语言类型——少一步，整个开发流就断在编辑器里。
