Subscribe via Feed

Improve the Quality of Your JS Code with the Rockstar JSLint Plugin

Jeremy Hodge, May 20, 2010 5:16:49 PM

One tool I really like is JSLint (  At the website you can paste in your (client side) Javascript code, and it will not only syntax check it, but also it will give you suggestions on Javascript Best Practices and Code Quality.

It can catch those nasty syntax problems that browsers like Firefox and Chrome ignore, but will bring IE to its knees, like the extra comma in an object definition like { someVar: 'Hello World', }, or misplaced or missing semi-colons, improper indententation, and a whole lot more.

The downside is that the classic 'jsLint' is a web page, and you have to paste your code in, and coordinate the output with your code in the domino js editor, etc. Not really a big help to workflow and productivity.

Thats where the JSLint eclipse plugin from Rockstar Apps comes in.  Install it in your Domino Designer environment and you can JSLint your code in DDE.

In order to install the plugin, you have to have the feature enabled that shows File - Application - Install ... to do this, you can follow the directions on Mary Beth Raven's Blog.

Here's how to install it:

1. In DDE, Go to File - Application - Install

2. Select "Search for new features to install" and click Next

3. Click the "Add Remote Location..." button

4.  Type in 'Rockstar Apps' as the Name, and the url

5. Click the Ok button, and Rockstar Apps will be added to your list of update sites.  Make sure "Rockstar Apps" is checked, and click the Finish button.

6. A new window will appear with the available eclipse plugins. Expand "Rockstar Apps", and then expand "Rockstarapps" and select "Rockstar JsLint" (your version number may vary).  JsLint is also dependant upon the Rockstar HTML Core Feature, so select that as well:

7. Click Next, and click the "I accept" to the terms of the license. Click next again, then click the Finish Button to actually install the plugin.

You may get a warning about the plug-in not being signed, select "Install this plug-in" and click Ok...

After you complete the installation, you will need to restart Notes/DDE...

If you have visited the Rockstar Apps website, you can see there is some nice integration with the standard JS editor, but because DDE doesn't use this editor, you can't get all the in-line features when you are editing a javascript library.  However, what you can do, is right click your javascript library in the Applications panel, and in the menu you will see the Rockstar Apps Menu:

Click the "Validate with JsLint..." menu option, and you will be presented with a Validation Properties window where you can select how brutal you want the feedback to be.  You can read more about each of the options on the JsLint website ... Click the Next button when you have set your options, and then click Finish.

Your Problems Pane will come to life with warnings and errors to help you create better Javascript!

You can then double click any of the warnings, and DDE will open your code in the standard Eclipse JS Editor, where you can see all the warnings highlighted in the margin. You can edit, update and save your JS library right here just like in DDE's normal JS Editor.

Now, you are well on your way to coding safer, cleaner, and better Javascript!


Happy Coding!

4 responses to Improve the Quality of Your JS Code with the Rockstar JSLint Plugin

Erik Brooks, May 21, 2010 3:17 PM

I was *just* looking for this, and I've used jsLint for years now. Thanks!

DDE <-- That last letter is so freakin' awesome.

Jeremy Hodge, May 21, 2010 11:45 AM

All I can say right now with any certainty is .... stay tuned.....

Stephan H. Wissel, May 21, 2010 5:05 AM

I second Tommy. SSJS.lint would be great.
JSLint is written in Javascript, source is available - now we need a volunteer.

Tommy Valand, May 20, 2010 6:54 PM

Great tip!

Now if only someone could create a JSLint version for SSJS as well.. :P
(var db:NotesDatabase isn't valid JS with standard JSLint)