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.
Changes to the 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:
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.