Steps to setup css-lint in eclipse based on Rhino

Hello World!

Here I’m documenting steps to setup css-lint as an external eclipse tool, so as to be able to lint the css right in the IDE without any hastle. My post focuses on the css-lint which runs on rhino on windows environment.

Here goes:

1. Download Rhino from here. Move it wherever you want. It should work as long as you modify your classpath to include the folder which contains js.jar. (If it throws an error, just use absolute path)

2. Download css-lintrhino.js from here. This link will open the js file in your browser most probably, so just save that file as csslint-rhino.js, and put it the directory called csslint, which you will create under eclipse foler (for argument sake). Again, just use absolute path to be safe.

3. Create a csslint.bat file inside the csslint directory, and copy the following to the file:
java -jar c:\path\to\js.jar c:\path\to\csslint-rhino.js %*

The above statement assumes that you have js.jar on your classpath, and cssling=rhino.js is in the same directory as the .bat file. (otherwise it won’t work).

4. Go to eclipse, and from the menu select: Run > External Tools > External Tools Configurations
You should be able to see a dialog box at this point.

5. In the left pane of this dialog box click on the program, and then click on ‘new launch configuration’ right above it.
At this point you should be able to see a new configuration in the right pane.

6. Change the name to csslint or whatever you wanna name it to

7. The location box should have C:\path\to\csslint.bat
put ${workspace_loc} in the workspace textbox put${resource_loc} in the Arguments textarea

8. In the right pane switch to the common tab and check the ‘Display in favorite menu’ checkbox, so you can have easy access to it from the eclipse toolbar

9. Click on apply, and close the dialog box

How it works:
1. Have the css file that you want to run the lint on open and focused in the editor.
2. From the toolbar click on ‘run as external tool’ icon dropdown, and select csslint (or whatever you named the tool).
3. You should be able to see the results in Console dialog.

Hope it helps!