IntelliJ IDEA 2016.2 Help

Using Pug (Jade) Template Engine

IntelliJ IDEA supports integration with the Pug (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 Pug (ex-Jade) plugins are installed and enabled. The plugins are not bundled with IntelliJ IDEA, 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 IntelliJ IDEA projects.

Also, if you need a file watcher, make sure that the plugin File Watchers is installed and enabled.

The plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

Changes to the UI

The Pug (ex-Jade) plugin introduces the following changes to the IntelliJ IDEA 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 NodeJS application

At runtime, the Pug (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 a Project from Scratch, Generating a Project from a Framework Template for details.
  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.
    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 files with the extension .jade or .pug 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.

      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, IntelliJ IDEA 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.

See Using File Watchers for details.

See Also

Last modified: 5 September 2016