paazmaya.fi

The Website of Juga Paazmaya | Stories about Web Development, Japanese Martial Arts, Hardware prototyping and travelling

Better quality LESS and CSS with RECESS via JetBrains

This is about adding RECESS to WebStorm. These instructions also apply to other editor products from JetBrains, such as Android Studio and IntelliJ IDEA.

Assuming that the Node.js has been installed to is default location, which in most case would be C:\Program Files\nodejs and that RECESS has been installed with the command:

npm install -g recess

Thus becoming available somewhere in C:\Users\username\AppData\Roaming\npm\node_modules\recess.

Now setting up an inline run command for running RECESS on the current file, go to

File —> Settings —> External Tools (In editor settings) —> + (add new)

The name of the tool, group name and description can be freely chosen, but for the sake of clarity, the following lines copied from the RECESS page at GitHub could be used.

Program:
  C:\Program Files\nodejs\node.exe

Parameters:
  C:\Users\username\AppData\Roaming\npm\node_modules\recess\bin\recess $FilePath$

Working directory:
  $FileDir$

Now the command is available while right clicking an open document, via LESS sub menu item.

In case any of the available options of RECESS should be used, they can be appended to the Parameters option.

By following the same flow, it is possible to add other similar tools to the above mentioned editors.