WebStorm是一個非常棒的Web前端開發編輯器，被程序猿們成為“最智能的JavaScript IDE”。對HTML5、Bootstrap框架、Node.js等都有完美支持。目前最新版本為WebStorm 8.0.x。下面就介紹一下如何在WebStorm 8.0安裝LESS編譯環境。

1、首先安裝WebStorm 8.0

在官方下載并安裝WebStorm 8.0.x，具體步驟就不說了，沒什么特別之處。

2、安裝NodeJs

NodeJs官方版本有32位和64位，可以根據實際需要進行選擇安裝。

安裝成功后，在“命令提示符”（Win+R）下運行“node -v”和“npm -v”能夠顯示版本號就說明成功了（如圖）。

3、安裝LESS

在“命令提示符”下運行命令“npm install less -g”，然后npm就開始下載并安裝LESS。

安裝成功的界面是這樣的（如圖）。

在這里，我們能夠看到lessc安裝的目錄，這個要先記下來。

4、在WebStorm里面配置LESS編譯

這個步驟稍微復雜一些，打開WebStorm，找到“File -> Settings”，在“IDE Settings”里面找到“External Tools”。

點擊“+”，如圖填寫“Name”和“Group”，在“Tool settings”里面有三個項目需要填寫。“Program”選擇“node.exe”的實際路徑，“Working directory”就是nodejs的安裝目錄。

最重要的就是“Parameters”，格式為：

lessc安裝的目錄lessc $FilePath$

這里就用到了之前我們記錄下來的lessc安裝的目錄。

我這里實際上是：

C:Users用戶名AppDataRoaming pm ode_moduleslessinlessc $FilePath$

到這里，就完成一大半了。現在我們可以新建一個工程，并且打開一個less文件了。

在初次打開less文件的時候，在編輯界面的右上方會出現一個“Add watcher”鏈接，這里就是為了為此項目的less文件配置watcher的地方，點擊開可以對輸出路徑進行配置“Output paths to refresh”，其他配置無需變化。

如果想再次修改watcher，在“File -> Settings -> External Tools”里面可以再次修改。