Webstorm 8.0 Installing the less-compiled environment tutorial

Webstorm is a great web front-end development editor that is the "smartest JavaScript IDE" by the program apes. Perfect support for HTML5, bootstrap framework, and node. js. Currently the latest version is Webstorm 8.0.x. Here's how to install the less-compiled environment in Webstorm 8.0.

1, first install Webstorm 8.0

In the official download and install Webstorm 8.0.x, the specific steps will not say, nothing special.

2, Installation Nodejs

The official version of Nodejs has 32-bit and 64-bit, which can be installed according to the actual needs.

After the installation succeeds, running "node-v" and "npm-v" at the command prompt (win+r) displays the version number to indicate success ().

3. Install less

Run the command "NPM install less-g" under "Command Prompt", and NPM will start downloading and installing less.

The interface for successful installation is this ().

Here, we can see the LESSC installed directory, this should be written down first.

4. Configure less compilation in Webstorm

This step is slightly more complicated, open webstorm, find "File-and Settings", and find "External Tools" in "IDE Settings".

Click "+", fill in "Name" and "Group", in "Tool settings" There are three items to fill in. "program" selects the actual path of "Node.exe", "Working Directory" is the installation directory of Nodejs.

The most important is "Parameters", in the form of:

LESSC installed directory LESSC $FilePath $

Here we use the LESSC installation directory we recorded earlier.

I'm actually here:

C:users User name APPDATAROAMINGPMODE_MODULESLESSINLESSC $FilePath $

When we get here, we finish the more than half. Now we can create a new project and open a less file.

When you first open the less file, an "Add Watcher" link appears at the top right of the editing interface, where you can configure the watcher for the less file for this project, and click on to configure the output path to "outputs Paths to refresh" , other configurations do not need to change.

If you want to modify the watcher again, you can modify it again in the "File-, Settings-External tools (external Tools)".

Webstorm 8.0 Installing the less-compiled environment tutorial