如何在 WebStorm 中使用 Pug/Jade 模板引擎？

煙雲

发布时间：2025-07-04 09:03:02

980人浏览过

来源于php中文网

原创

要在webstorm中高效使用pug模板引擎，需完成以下步骤：1. 安装pug：通过npm或yarn在项目中安装pug；2. 配置文件类型：在webstorm中将.pug文件关联至pug语言以启用语法高亮与代码补全；3. 利用内置功能：如语法高亮、emmet支持、代码格式化及live edit实时预览；4. 调试pug模板：编译生成html后，在javascript代码中设置断点并结合webstorm调试器与chrome开发者工具进行调试；5. 实现自动编译：通过配置file watchers调用pug命令行工具实现保存时自动编译；6. 解决格式化问题：调整webstorm的html代码风格设置或使用editorconfig保持代码风格一致；7. 使用live templates：创建自定义pug代码片段提升开发效率。以上配置完成后，即可显著提升pug在webstorm中的开发体验与编码效率。

如何在 WebStorm 中使用 Pug/Jade 模板引擎？

Pug (原 Jade) 是一种简洁优雅的 HTML 模板引擎，能在 WebStorm 中高效使用。关键在于配置 WebStorm 的文件类型关联和利用其提供的代码补全、语法高亮等功能。

在 WebStorm 中使用 Pug/Jade 模板引擎，你需要进行一些配置，并了解如何利用 WebStorm 提供的功能来提高开发效率。

安装 Pug

首先，确保你的项目中已经安装了 Pug。可以使用 npm 或 yarn 进行安装：

npm install pug
# 或者
yarn add pug

配置 WebStorm 文件类型

WebStorm 需要知道 .pug 文件应该如何处理。

打开 WebStorm 的设置 (File -> Settings 或 WebStorm -> Preferences)。
导航到 Editor -> File Types。
在 "Recognized File Types" 列表中，查找 "Pug"。如果没有，点击 "+" 按钮，选择 "Pug"。
在 "Registered Patterns" 中，添加 *.pug。

使用 WebStorm 的 Pug 功能

配置完成后，WebStorm 会自动识别 .pug 文件，并提供以下功能：

语法高亮： Pug 代码会根据语法进行高亮显示，提高可读性。
代码补全： WebStorm 会根据上下文提供代码补全建议，减少手动输入。
Emmet 支持： Pug 支持 Emmet 语法，可以快速生成 HTML 结构。例如，输入 div#container.wrapper>ul>li*3>a 然后按 Tab 键，可以快速生成一个包含嵌套列表和链接的 div。
代码格式化： WebStorm 可以自动格式化 Pug 代码，保持代码风格一致。使用快捷键 Ctrl+Alt+L (Windows/Linux) 或 Cmd+Option+L (macOS) 可以格式化代码。
实时预览 (配合 Live Edit): 可以配置 WebStorm 的 Live Edit 功能，在修改 Pug 文件后自动刷新浏览器，实时预览效果。

如何在 WebStorm 中调试 Pug 模板？

直接调试 Pug 模板本身比较困难，因为 Pug 最终会被编译成 HTML。调试的重点应该放在生成的 HTML 和相关的 JavaScript 代码上。

编译 Pug 模板: 你需要先将 Pug 模板编译成 HTML。可以使用 Pug 的命令行工具或在 Node.js 代码中使用 pug.renderFile 方法。

const pug = require('pug');
const compiledFunction = pug.compileFile('template.pug');
const html = compiledFunction({ name: 'Timothy' });
console.log(html);

设置断点: 在与生成的 HTML 交互的 JavaScript 代码中设置断点。例如，如果你的 JavaScript 代码动态地更新了 HTML 内容，就在更新代码的地方设置断点。
使用 WebStorm 的调试器: 启动 WebStorm 的调试器，运行你的 Node.js 应用或在浏览器中打开 HTML 文件。当代码执行到断点时，调试器会暂停，你可以检查变量的值，单步执行代码，等等。
利用 Chrome 开发者工具: Chrome 开发者工具可以帮助你检查生成的 HTML 结构，查看 CSS 样式，以及调试 JavaScript 代码。你可以通过 "Elements" 面板查看 HTML 结构，通过 "Sources" 面板调试 JavaScript 代码。

WebStorm 是否支持 Pug 的自动编译？

WebStorm 本身不直接提供 Pug 的自动编译功能，但可以通过配置 "File Watchers" 来实现。 File Watchers 可以在文件发生变化时自动执行指定的命令。

打开 File Watchers 设置: 在 WebStorm 的设置中，导航到 Tools -> File Watchers。
添加新的 File Watcher: 点击 "+" 按钮，选择 "Pug"。如果没有 Pug 选项，选择 "Custom"。
配置 File Watcher: 根据你的项目配置进行设置。以下是一些常用的配置选项：
- Name: File Watcher 的名称，例如 "Pug Compiler"。
- File type: 选择 "Pug"。
- Scope: 指定 File Watcher 监控的文件范围。
- Program: Pug 编译器的可执行文件路径。通常是 node_modules/.bin/pug。你可以使用 $ProjectFileDir$ 变量来指定项目根目录。例如，$ProjectFileDir$/node_modules/.bin/pug。
- Arguments: 传递给 Pug 编译器的参数。例如，$FilePath$ --out $FileDir$ 会将当前 Pug 文件编译成 HTML 文件，并输出到同一目录下。你还可以添加其他参数，例如 --pretty 可以生成格式化的 HTML 代码。
- Output paths to refresh: 指定编译后需要刷新的文件路径。例如，$FileDir$/$FileNameWithoutExtension$.html。
启用 File Watcher: 确保 File Watcher 已启用 (选中复选框)。

配置完成后，当你的 Pug 文件发生变化时，WebStorm 会自动执行 Pug 编译器，生成 HTML 文件。

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

下载

如何解决 WebStorm 中 Pug 代码格式化问题？

WebStorm 默认的代码格式化可能不完全符合你的 Pug 代码风格。你可以通过配置 WebStorm 的代码风格设置来解决这个问题。

打开 Code Style 设置: 在 WebStorm 的设置中，导航到 Editor -> Code Style -> HTML。
配置 HTML 代码风格: WebStorm 将 Pug 代码视为 HTML 代码进行格式化。你可以配置以下选项来调整代码风格：
- General: 设置缩进大小、换行方式等。
- Other: 设置是否保留空行、是否在属性周围添加空格等。
使用 EditorConfig: 如果你的项目使用了 EditorConfig 文件，WebStorm 会自动读取 EditorConfig 文件中的代码风格设置，并应用到 Pug 代码的格式化中。 EditorConfig 可以帮助你保持团队代码风格的一致性。

如何在 WebStorm 中使用 Pug 的代码片段 (Live Templates)？

WebStorm 的 Live Templates 功能可以让你快速插入常用的 Pug 代码片段。

打开 Live Templates 设置: 在 WebStorm 的设置中，导航到 Editor -> Live Templates。
创建新的 Live Template: 点击 "+" 按钮，选择 "Live Template"。
配置 Live Template: 根据你的需求进行设置。以下是一些常用的配置选项：
- Abbreviation: 用于触发 Live Template 的缩写。例如，pug-block。
- Description: Live Template 的描述。
- Template text: Pug 代码片段。你可以使用变量来插入动态内容。例如：
```
block $BLOCK_NAME$
    $END$
```
- Applicable in: 指定 Live Template 适用的文件类型。选择 "HTML"。
使用 Live Template: 在 Pug 文件中输入缩写，然后按 Tab 键，WebStorm 会自动插入代码片段。

通过配置 Live Templates，你可以快速插入常用的 Pug 代码结构，提高开发效率。例如，你可以创建一个 Live Template 来快速插入一个包含标题和内容的 section：

Abbreviation: pug-section
Description: Create a section with a title and content.
Template text:

section
  h2 $TITLE$
  p $CONTENT$
  $END$

现在，在你的 Pug 文件中输入 pug-section 然后按 Tab 键，WebStorm 会自动插入以下代码：

section
  h2
  p

你可以直接在占位符 $TITLE$ 和 $CONTENT$ 中输入标题和内容。

在WebStorm中使用SVN进行团队协作开发

批量安装WebStorm插件的脚本编写

优化WebStorm启动速度的设置技巧

WebStorm插件更新不及时的解决策略

如何开发自定义 WebStorm 插件？

相关专题

chrome什么意思

chrome是浏览器的意思，由Google开发的网络浏览器，它在2008年首次发布，并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容，供大家免费下载体验。

1058

2023.08.11

chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

838

2023.11.06

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

530

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

760

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

6207

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

492

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

221

2023.09.04

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

热门下载

网站特效

网站源码

网站素材

前端模板