Checking JavaScript in NetBeans

NetBeans 7.3 has introduced an improved JavaScript support, including a wider support for JavaScript code checks. It is also possible to install a JSLint plugin for stronger code checking.

Let’s start with NetBeans native capabilities. In the Tools -> Options -> Editor -> Hints we can find all NetBeans code quality checks, divided by language.

The following picture shows the JavaScript checks:

2013-05-22_fig1

In the following picture we see how the NetBeans JavaScript hints work:

2013-05-22_fig2

This is nice feature to have so we can fix the errors while we are coding. Unfortunately the NetBeans JavaScript checks are limited (in number) and we should use an external plugin to enforce our code checking rules to our js files.

JSLint is the reference JavaScript quality checker. A good JSLint plugin for NetBeans is available here.

To install it in NetBeans, juts follow this simple procedure:

1. Download the plugin on the PC

2. Open the Plugin window in NetBeans (Tools -> Plugins) and click on the “Downloaded” tab.

3. Click on “Add Plugins” and select the downloaded file.

2013-05-22_fig3

4. Press “Install” to start JSLint plugin installation.

After installation, we can go back to our file and check it now with JSLint. Open the context menu (right mouse click) and select “JSLint”. In the Action Items window, we find all errors detected by JSLint on our file.

2013-05-22_fig4

As we can see in the picture, JSLint is more restrictive than NetBeans, showing more errors (3 in our small example). For the complete and reference list of JSLint checks please refer to the JSLint author page.

If the Action Items list contains errors on other files in the project and in particular on libraries files (like jQuery and Bootstrap js files) we can easily filter out them. We can create an Action Item Filter as shown in the following images:

2013-05-22_fig5

2013-05-22_fig6

JSLint plugin configuration can be found in Tools -> Options -> Miscellaneous -> JSLint (tab). The options set on this page are valid for all JavaScript files in the project. In the next picture, the configuration I usually use in my projects:

2013-05-22_fig7

Basically I limit line length to 80 characters and define window as global variable.

File specific settings can be defined as follows:

/*jslint sloppy:true */
/*global window */
function myFunc(txt) {
window.alert(txt)
}

The /*jslint contains JSLint configuration parameters while /*global defines implicit global variables (defined outside the current file). Important: there should be no space between the asterisk and the words jslint and global so take care that NetBeans formatting will not try to format Javascript comments.

Advertisements

One thought on “Checking JavaScript in NetBeans

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s