JetBrains Rider 2025.2 Help

Pug (Jade)

JetBrains Rider 集成了 Pug (Jade) 模板引擎,该引擎将 Pug (Jade) 文件转换为 HTML。

Pug 文件用 Pug 图标 标记;Jade 文件用 Jade 图标 标记。

在开始之前

  1. 请确保您的计算机上安装了 Node.js

  2. 请确保在 设置 | 插件 页面, 已安装 选项卡中启用了所需的 Pug (ex-Jade)File Watchers 插件。 如需了解更多信息,请参阅 管理插件

安装 Pug

  • 在嵌入的 终端 (Alt+F12 )中,输入:

    npm install -g pug-cli

编译 Pug

要自动编译您的代码,您需要安装模板引擎并配置一个 Pug/Jade File Watcher ,它将跟踪您的文件更改并运行模板引擎。

当您打开一个文件时,JetBrains Rider会检查当前项目中是否有适用的 File Watcher。 如果此类 File Watcher 已配置但已禁用,JetBrains Rider 会显示一个弹出窗口,通知您已配置的 File Watcher 并建议启用它。

如果在当前项目中配置并启用了适用的 File Watcher,则 JetBrains Rider 会在 新建监视器对话框 中指定的事件发生时自动启动编译器。

  • 如果选中了 自动保存已编辑的文件以触发监视器 复选框,一旦对源代码进行了任何更改,就会调用 File Watcher。

  • 如果 自动保存已编辑的文件以触发监视器 复选框被清除,File Watcher 会在保存时(文件 | 全部保存Ctrl+S )或当您将焦点从 JetBrains Rider 移开时(当框架失去焦点时)启动。

创建 Pug/Jade 文件监视器

  1. 打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 工具 | 文件监视器

  2. 点击 "添加"按钮 或按 Alt+Insert 并从列表中选择 Pug/ Jade 预定义模板。 您的代码将被翻译成 JavaScript,并附带生成的 source maps

  3. 程序 字段中,指定 pugjade 包的路径。 请手动输入路径或点击 "浏览" 按钮 并在打开的对话框中选择文件位置。

  4. 请按照 文件监视器 中的描述进行操作。

配置语法高亮

您可以根据您的偏好和习惯配置 Pug/Jade 语法高亮。

  1. 设置/首选项 对话框(Ctrl+Alt+S )中,转到 编辑器 | 配色方案 | Pug/Jade

  2. 选择颜色方案,接受从默认设置继承的高亮设置,或按照 配色方案:IDE 文本的字体和颜色 中的描述自定义它们。

最后修改日期: 2025年 9月 26日