# Pug (Jade)

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 所需插件  :
>
>
>
> `Pug（前称 Jade）`  -  在   设置 | 插件   页面上安装插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。
>
>
>
> `File Watchers`  -  在   设置 | 插件   页面上安装插件。

IntelliJ IDEA 集成了 [Pug (Jade)](https://github.com/pugjs/pug#readme) 模板引擎，该引擎将 Pug (Jade) 文件转换为 HTML。

Pug 文件用 ![Pug 图标](https://resources.jetbrains.com/help/img/idea/2026.3/pug.png)标记；Jade 文件用 ![Jade 图标](https://resources.jetbrains.com/help/img/idea/2026.3/jade.png)标记。

## 开始之前

Procedure:

1. 请确保您的计算机上安装了 [Node.js](http://nodejs.org/)。

2. 安装  Pug (ex-Jade)  和  File Watchers  插件，位置在   设置 | 插件   页面上，如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)中所述。销售

## 安装 Pug

Procedure:

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install -g pug-cli`

## 编译 Pug

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

打开文件时，IntelliJ IDEA 会检查当前项目中是否有适用的文件关注者。 如果已配置此类文件关注者但其已禁用，IntelliJ IDEA 会显示一个弹出窗口，告知已配置的文件关注者并建议启用它。

如果当前项目中已配置并启用了适用的文件关注者，IntelliJ IDEA 会在 [新建关注者对话框](new-watcher-dialog.html) 中指定的事件发生时自动启动编译器。

* 如果选中 自动保存已编辑的文件以触发监视器 复选框，只要源代码发生任何更改，就会调用文件关注者。

* 如果清除 自动保存已编辑的文件以触发监视器 复选框，文件关注者会在保存时（ `文件 | 全部保存` 、 `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (NetBeans), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))）或将焦点从 IntelliJ IDEA 移开时（帧停用时）启动。

有关更多信息，请参阅 [File Watchers](using-file-watchers.html)。

Procedure: 创建 Pug/Jade 文件监视器

1. 打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到  `工具 | File Watchers` 。

2. 点击 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg) 或按 `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) 并从列表中选择   Pug/ Jade   预定义模板。 您的代码将被翻译成 JavaScript，并附带生成的 [source maps](http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/)。

3. 在   程序   字段中，指定  `pug`  或  `jade`  包的路径。 请手动输入路径或点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg)并在打开的对话框中选择文件位置。

4. 按照 [File Watchers](using-file-watchers.html) 中的说明进行操作。

## 配置语法高亮

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

Procedure:

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 配色方案 | Pug/Jade` 。

2. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。

## See also

### 过程

[插件](managing-plugins.html) [Node.js](developing-node-js-applications.html) [项目](creating-and-managing-projects.html) [File Watchers](using-file-watchers.html)

### 参考

[新建监视器对话框](new-watcher-dialog.html)