基于Sublime Text与Pug (Jade) 模板引擎的高效Node.js服务端页面开发-sublime-PHP中文网

Sublime 打开 .pug 文件显示 Plain Text 是因未绑定后缀，需手动设置：右下角选 Pug → Open all with current extension as… → 确认 Pug，生成正确语法配置。

基于sublime text与pug (jade) 模板引擎的高效node.js服务端页面开发

不是插件没装好，是 Sublime 根本没把 .pug 后缀和 Pug 语法绑定。Package Control 安装的 Pug 插件只提供 Packages/Pug/Pug.sublime-syntax 文件，不自动注册扩展名。

打开任意 index.pug 文件，点击右下角显示的 Plain Text
在弹出菜单中选 Pug（若没有该选项，说明插件未加载成功，重启 Sublime 或重装 Pug 包）
再点右下角语言名（此时应显示 Pug），选 Open all with current extension as… → 确认选 Pug
这会写入 Packages/User/Preferences.sublime-settings，生成形如：
```
{ "extensions": ["pug"], "syntax": "Packages/Pug/Pug.sublime-syntax" }
```
的配置
注意：syntax 值必须大小写严格匹配、以 Packages/ 开头、后缀为 .sublime-syntax（不是 .tmLanguage）

常见于路径配置错误或模板文件缺失，和 Pug 版本无关，但容易被误判为语法问题。

app.set('views', './views') 中的路径是相对于 process.cwd()（即启动命令所在目录），不是 app.js 所在目录
确保 views 目录存在且含 index.pug（不是 index.jade，旧名已弃用）
检查 app.set('view engine', 'pug') —— 必须是 pug，不能写成 jade 或 Pug（大小写敏感）
若用 express-generator 初始化项目，默认已配好 Pug，但需确认是否手动删过 views 目录或改过 app.set 路径
启动服务前运行 ls views/（macOS/Linux）或 dir views（Windows）验证文件存在

这个函数常用于预编译或 CLI 场景，但默认不处理相对路径，也不自动读取 include 或 extends 的依赖文件。

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

传入绝对路径：用 path.resolve(__dirname, 'views/layout.pug') 替代 'views/layout.pug'
若模板含 include header，需确保 header.pug 与当前文件同目录，或显式指定 basedir 选项：
```
pug.compileFile('layout.pug', { basedir: path.join(__dirname, 'views') })
```
错误信息如 Error: ENOENT: no such file or directory, open 'header.pug' 就是 basedir 缺失导致的
开发期建议直接用 res.render()；compileFile() 更适合构建时生成静态 HTML 或做性能压测

这是变量作用域和转义逻辑混淆的典型表现，不是数据没传进去，而是写法或上下文不对。

#{} 是非转义插值，仅用于属性值内（如 a(href='/#{url}') Link），不能用在文本节点中——那里该用 =
文本内容统一用 = variable，例如 p= message；若 message 是字符串，它会被 HTML 转义；需要原样输出则用 != message
检查传递的数据结构：若 res.render('page', { user: { name: 'Alice' } })，模板中写 p= user.name 才对，p= name 会 undefined
调试技巧：在模板开头加 - console.log(locals)（仅开发环境），看实际注入的对象结构