Using Pug (Jade) Template Engine
WebStorm supports integration with the Pug (Jade) template engine.
On this page:
Before you start
- Enable Node.js support as described in Node.js.
- Make sure the NodeJS and Pug/(ex-Jade) plugins are enabled. The plugins are bundled with WebStorm and activated by default. If the plugins are not activated, enable them on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.
Also, if you need a file watcher, make sure that the plugin File Watchers is enabled.Make sure the plugin is enabled. The plugin is bundled with WebStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.
Changes to the UI
The Pug (ex-Jade) plugin introduces the following changes to the WebStorm UI:
- The Jade file item is added to the menu.
- The Pug files are marked with the icon ; the Jade files are marked with the icon .
- Coding assistance is provided in the Pug (Jade)-specific and HTML context:
- Code formatting
- Syntax highlighting
- Code completion
- Color schemes
Using Pug(Jade) templates in a NodeJS application
At runtime, the Pug (Jade) files fill be transformed into HTML pages.
- Create a project from scratch, or around existing sources, or based on a NodeExpress template. See Creating a Project from Existing Local Sources, or Generating a Project from a Framework Template for details.
- Create a Pug (Jade) file. Follow these steps:
- In the Project tool window, select the directory in which you want to create a new file. To do that, for example, choose .
- On the context menu, choose Jade file and specify the file name in the dialog box that opens.
- Create a File Watcher to transform files with the extension
- Click the Add Watcher link in the upper right-hand corner of the editor.
- In the New Watcher Dialog, accept the default predefined settings.
Note that if the executable is in the PATH, then you should not specify it explicitly. Depending on the file extension (
.pug), the corresponding executable is invoked.
- As you edit a
.jadefile, WebStorm invokes the file watcher which creates an
.htmlfile with the name of the processed
.jadefile and stores the generated
htmlcode in it.
See Using File Watchers for details.
Last modified: 15 November 2016