VSCode运行EJS/Pug模板：前端渲染引擎的实时预览配置-VSCode-PHP中文网

live server 打开 .ejs 文件只显示源码是设计使然，因其仅为静态 http 服务，不执行 ejs.render()；需用 express + ejs 搭建服务端渲染环境才能正确解析并展示 html。

vscode运行ejs/pug模板：前端渲染引擎的实时预览配置

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 实现文件变更自动重启

要让 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 的缩进敏感性和混合语法（JavaScript + 模板指令）会让默认的 Prettier 直接崩溃或破坏结构。直接启用 Prettier 格式化 .pug 文件，大概率导致 unexpected token 或渲染失败。

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

必须分三步走通格式化链路：

安装 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 补全失效

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 要手动绑定语言类型——少一步，整个开发流就断在编辑器里。