PhpStorm 2016.2 Help

Using JADE Template Engine

PhpStorm supports integration with the JADE template engine.

On this page:

Before you start

  1. Enable Node.js support as described in Node.js.
  2. Make sure the NodeJS and Jade plugins are installed and enabled. The plugins are not bundled with PhpStorm, but they can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins. Once enabled, the plugins are available at the IDE level, that is, you can use it in all your PhpStorm projects.

Changes to the UI

The JADE plugin introduces the following changes to the PhpStorm UI:

Using JADE templates in a NodeJS application

In the runtime, the JADE files fill be transformed into HTML pages.

  1. 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.
  2. Create the JADE files you need:
    1. In the Project tool window, select the directory in which you want to create a new file. Choose File | New or press Alt+Insert.

      Alternatively, right-click the corresponding directory and choose New from the context menu.

    2. On the context menu, choose Jade file and specify the file name in the dialog box that opens.
  3. Create a File Watcher to transform .jade files into .html pages:
    1. Click the Add Watcher link in the upper right-hand corner of the editor.
    2. In the New Watcher Dialog, accept the default predefined settings and specify the location of the JADE transpiler executable file jade.cmd or jade.
  4. As you edit a .jade file, PhpStorm 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