GEOG 863:
Web Application Development for Geospatial Professionals

4.5.3 JSLint/JSHint


One strategy for avoiding errors when you test your apps in a browser is to catch those errors in your development environment. A linter is a tool that is used to analyze code for potential errors. Linters exist for many programming languages, but in a JavaScript context, JSLint is perhaps the best known. You can use JSLint online by navigating to JSLint, pasting your JS code into the big text box and clicking the JSLint button.

JSLint was developed by Doug Crockford in 2002 and the standards his linter enforces are described on the JSLint website. Many have found some of the JSLint rules to be overly strict (e.g., statements within a function are required to be indented exactly 4 spaces). For this reason, a more flexible alternative was developed as a community-driven open-source project: JSHint.

Many IDEs come equipped with one or both of these tools. Others (like Notepad++) can have the tools added through a plugin. Let’s install and experiment with the Notepad++ plugin.

  1. Download the plugin from SourceForge.
  2. Unzip the downloaded file. You should see a .dll file and a README.txt file.
  3. Copy the .dll file to your Notepad++ plugins folder (which should be at C:\Program Files (x86)\Notepad++\plugins).
  4. Open Notepad++ (close and re-open if it was open during the previous step).
  5. Under the Plugins menu, you should now see a JSLint menu.
  6. Open one of your .js files (e.g., the one associated with your Hello_Map app).
  7. Run JSLint by going to Plugins > JSLint > JSLint Current File. (Note the Ctrl-Shift-F5 keyboard shortcut.) A panel should appear at the bottom of your Notepad++ window listing the Errors in your file. Most of these errors should be related to the 4-space-indentation rule mentioned above.
  8. Now let’s switch to using JSHint instead.
  9. Go to Plugins > JSLint > JSLint Options.
  10. At the top of the dialog, change the selection in the Choose JavaScript lint dropdown from JSLint to JSHint.
  11. The Options dialog provides a long list of syntax error categories. We won’t modify any of these settings, but you should remember that you have the ability to toggle off notification of certain error types.
  12. Re-run the check (the GUI will still say that you’re running JSLint). If your file produces no errors in a browser, you should see no errors listed now.
  13. Experiment by inserting an error or two and seeing how the tool flags them.

One last note on linting: Some IDEs offer the ability to run JSLint/JSHint automatically as you’re writing your code. This can make it even easier to ensure you’re writing valid code as you go.