Using JADE Template Engine
WebStorm supports integration with the JADE template engine.
On this page:
Before you start
- Enable Node.js support as described in Node.js.
- Make sure the NodeJS and 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 plugin introduces the following changes to the WebStorm UI:
- The Jade file item is added to the menu.
-
Coding assistance is provided in the JADE-specific and HTML context:
- Code formatting
- Syntax highlighting
- Code completion
- Color schemes
Using JADE templates in a NodeJS application
In the runtime, the 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 New Project from Scratch, Creating a Project from Existing Local Sources, or Generating a Project from a Framework Template for details.
-
Create the JADE files you need:
-
In the Project tool window, select the directory in which you want to create a new file.
Choose or press Alt+Insert.
Alternatively, right-click the corresponding directory and choose New from the context menu.
- On the context menu, choose Jade file and specify the file name in the dialog box that opens.
-
In the Project tool window, select the directory in which you want to create a new file.
Choose or press Alt+Insert.
-
Create a File Watcher to transform
.jade
files 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 and specify the location of the JADE transpiler executable file
jade.cmd
orjade
.
-
As you edit a
.jade
file, WebStorm invokes the file watcher which creates an.html
file with the name of the processed.jade
file and stores the generated HTML code in it.
See Using File Watchers for details.
See Also
Last modified: 3 June 2016