Developing Jade with Sublime and Webstorm

Sublime, Webstorm (phpstorm) is a powerful tool for front-end developers, and the development of Jade is no Exception.

Before configuring the Jade development environment for these software, first install Node. JS and Jade in your system:

1. Install Node. JS and restart your computer when installed
2. Install Jade
   • Running in Windows:cmdnpm install jade --global
   • Mac: Runsudo npm install jade --global

Configuration Sublime:

2. Install Sublime package Control and Skip this step if it is already installed. After the installation is complete, you need to restart Sublime Text, if you can find the package Control menu in the menu Preferences > Settings, the installation is Successful. The following will install the Sublime plug-in using the package Control method:
   • Windows: shortcut keys Ctrl+Shift+P bring up the command panel, enter install to bring up the Install package option and return, wait a moment, in the new popup panel to query the required plug-in, enter to install
   • Mac: shortcut keys Cmd+Shift+P bring up the command panel, enter install to bring up the Install package option and return, wait a moment, in the new popup panel to query the required plug-in, enter to install
4. Syntax support: install Jade through the package Control
6. Compile Tool:
   1. Installing the Jade Build with the package Control
   2. In the menu Tools > Build System, Verify that Automatic or Jade is checked
   3. When used, the compilation is performed in The. Jade file by using Ctrl+B (Mac: Cmd+B ), such as a successful build in the sibling directory. HTML file
   4. Recommended to install Sublime through the package Control ? on? Save? Build, which is configured with reference https://sublime.wbond.net/packages/SublimeOnSaveBuild, is jade added to it so that it filename_filter can be compiled automatically each time the file is Saved.

Configuration webstorm:

2. Syntax support: the latest version of Webstorm has supported the jade syntax by default, if not, download the install Jade Plugin:
   • Windows: Open Menu File > Settings ( Ctrl+Alt+S ) > IDE Settings > Plugins, search Jade and install
   • Mac: Open Menu Webstorm > Preferences ( Cmd+, ) > IDE Settings > Plugins, search Jade and install
4. Automatic compilation:
   • Windows: Open Menu File > Settings ( Ctrl+Alt+S ) > Project Settings > File watchers, Add Jade

     Program fill out C:\Users\XXX\AppData\Roaming\npm\jade.cmd (xxx is the current user name), others remain the default, click OK.

   • Mac: Open Menu Webstorm > Preferences ( Cmd+, ) > Project Settings > File watchers, Adding Jade

     Program fill /usr/local/bin/jade in, Others remain the default, click OK.

   • When used, the. Jade file is automatically compiled each time it is saved, such as a successful compilation that generates AN. HTML file in a sibling directory. It is important to note that File watchers belongs to Project Setting and the new project needs to be reset.

Developing Jade with Sublime and Webstorm