PhpStorm 2018.2 Help

Pug (Jade) Template Engine

PhpStorm integrates with the Pug (Jade) template engine.

Before you start

  1. Install Node.js.

  2. Install and enable the Pug (former Jade) repository plugin on the Plugins page as described in Managing Plugins.

Changes to the UI

The Pug (ex-Jade) plugin introduces the following changes to the PhpStorm UI:

  • The Jade file item is added to the New menu.

  • The Pug files are marked with the icon pug; the Jade files are marked with the icon jade.

  • Coding assistance is provided in the Pug (Jade)-specific and HTML context:

Using Pug(Jade) templates in a Node.js application

At runtime, the Pug (Jade) files fill be transformed into HTML pages.


  2. Create a Pug (Jade) file. Follow these steps:
    1. In the Project Tool Window, select the directory in which you want to create a new file. To do that, for example, choose File | New.


  3. Create a File Watcher to transform files with the extension .jade or .pug into .html pages:

    2. 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.

      file watcher jade
  4. As you edit a .pug/.jade file, PhpStorm invokes the file watcher which creates an .html file with the name of the processed .pug/.jade file and stores the generated html code in it.

Last modified: 21 November 2018

See Also