Pug (Jade) Template Engine
WebStorm integrates with the Pug (Jade) template engine.
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 Node.js 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 Projects 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
.jade
or.pug
into.html
pages: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 (
.jade
or.pug
), the corresponding executable is invoked.
As you edit a
.pug
/.jade
file, WebStorm invokes the file watcher which creates an.html
file with the name of the processed.pug
/.jade
file and stores the generatedhtml
code in it.