Pug (Jade)
PhpStorm 集成了 Pug (Jade) 模板引擎，该引擎将 Pug (Jade) 文件转换为 HTML。
Pug 文件用 
标记；Jade 文件用 
标记。
开始之前
请确保您的计算机上安装了 Node.js。
在 设置 | 插件 页面上的 Marketplace 选项卡中，按照 从 JetBrains Marketplace 安装插件 的说明安装并启用 Pug (ex-Jade) 插件。
请确保在设置中启用了 File Watchers 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中输入 File Watchers。 有关插件的更多信息，请参阅 插件管理。
安装 Pug
在嵌入的 终端 (Alt+F12 )中，输入：
npm install -g pug-cli
编译 Pug
要自动编译您的代码，您需要安装模板引擎并配置一个 Pug/Jade File Watcher ，它将跟踪您的文件更改并运行模板引擎。
当您打开一个文件时，PhpStorm会检查当前项目中是否有适用的 File Watcher。 如果此类 File Watcher 已配置但已禁用，PhpStorm 会显示一个弹出窗口，通知您已配置的 File Watcher 并建议启用它。
如果在当前项目中配置并启用了适用的 File Watcher，则 PhpStorm 会在 新建监视器对话框 中指定的事件发生时自动启动编译器。
如果选中了 自动保存已编辑的文件以触发监视器 复选框，一旦对源代码进行了任何更改，就会调用 File Watcher。
如果 自动保存已编辑的文件以触发监视器 复选框被清除，File Watcher 会在保存时（， Ctrl+S ）或当您将焦点从 PhpStorm 移开时（当框架失去焦点时）启动。
请从 文件监视器 中了解更多。
创建 Pug/Jade 文件监视器
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
点击
或按 Alt+Insert 并从列表中选择 Pug/ Jade 预定义模板。 您的代码将被翻译成 JavaScript，并附带生成的 source maps。在 程序 字段中，指定
pug或jade包的路径。 请手动输入路径或点击
并在打开的对话框中选择文件位置。请按照 文件监视器 中的描述进行操作。
配置语法高亮
您可以根据您的偏好和习惯配置 Pug/Jade 语法高亮。
在 设置 对话框 (Ctrl+Alt+S) 中，前往 。
选择颜色方案，接受从默认设置继承的高亮设置，或按照 颜色和字体 中的描述自定义它们。