Checking your JavaScript code

Checking your JavaScript code

Following code guidelines and best practices is an important aspect of project development. This allows to detect potential bugs and prevent from using bad practices. Another aspect is preventing from tricky merges if you work within a team.

Such aspects are also obviously true for JavaScript applications (both client and server sides) and tools exist to ensure that application code is well-writen and to detect potential problems even before executing the application. Recall that JavaScript applications arent compiled so most of problems of syntax (like a missing bracket or ). Its something that can easily happens because of callback imbrications.

With JavaScript, there are some tools to check such aspect. The most well-known is JSHint. There is another interesting one that allows to check the style of your code: Jscs. These two tools are complementary and allow to detect different things: Jscs is more focused on the code style (indentation, length of lines, ) and JSHint on detecting errors and potential problems.

Installing code checking tools

These two tools can be easily installed using NPM. What you need not to forget is to install them globally to be able to use then within the text editor or IDE.

Here are the command lines to install them:

npm install jscs -g
npm install jshint -g

Thats all. The two tools are now ready to be used.

Configuring tools within your project

The Jscs rules must be configured with a file named .jscsrc within the root folder of your project. The good news is that the tool provides some presets for particular environment. You can get the right one for you and then adapt it more finely for your exact needs. All the presets are available at this link:

We choose the node-style-guide one here:

    "disallowKeywords": ["with"],
    "disallowKeywordsOnNewLine": ["else"],
    "disallowMixedSpacesAndTabs": true,
    "disallowMultipleVarDecl": "exceptUndefined",
    "disallowNewlineBeforeBlockStatements": true,
    "disallowQuotedKeysInObjects": true,
    "disallowSpaceAfterObjectKeys": true,
    "disallowSpaceAfterPrefixUnaryOperators": true,
    "disallowSpacesInFunction": {
        "beforeOpeningRoundBrace": true
    "disallowSpacesInsideParentheses": true,
    "disallowTrailingWhitespace": true,
    "maximumLineLength": 80,
    "requireCamelCaseOrUpperCaseIdentifiers": true,
    "requireCapitalizedComments": true,
    "requireCapitalizedConstructors": true,
    "requireCurlyBraces": true,
    "requireSpaceAfterKeywords": [
    "requireSpaceAfterLineComment": true,
    "requireSpaceAfterBinaryOperators": true,
    "requireSpaceBeforeBinaryOperators": true,
    "requireSpaceBeforeBlockStatements": true,
    "requireSpaceBeforeObjectValues": true,
    "requireSpacesInFunction": {
        "beforeOpeningCurlyBrace": true
    "validateIndentation": 2,
    "validateLineBreaks": "LF",
    "validateQuoteMarks": "'"

The JSHint tool leverages a file named .jshintrc also within the root folder of your project. You can find below a classical configuration file for this tool:

    "node": true,
    "browser": true,
    "esnext": true,
    "bitwise": true,
    "curly": true,
    "immed": true,
    "indent": 2,
    "latedef": true,
    "newcap": true,
    "noarg": true,
    "regexp": true,
    "strict": true,
    "trailing": true,
    "smarttabs": true,
    "laxbreak": true,
    "laxcomma": true,
    "quotmark": "single",
    "unused": true,
    "eqnull": true,
    "undef": true,
    // "eqeqeq": true, // TODO to restore after migration
    "globals": {
        "angular": false,
        "_": true,
        "moment": true,
        "$": false,
        "Stripe": false,
        "ngGridFlexibleHeightPlugin": false,
        "describe": true,
        "it": true

There are mainly two ways to use these tools: from command line and within your favorite text editor / IDE

Using command lines

The two tools provide command line utilies to launch them and display the errors for your project.

Here is the way to use JSHint:

$ jshint lib/**.js test/**/**.js

lib/client.js: line 241, col 26, 'createParameters' was used before it was defined.
lib/client.js: line 211, col 52, 'response' is not defined.
lib/client.js: line 225, col 52, 'response' is not defined.
lib/client.js: line 233, col 54, 'response' is not defined.
lib/client.js: line 20, col 10, 'isReadMethod' is defined but never used.
lib/client.js: line 160, col 10, 'extractName' is defined but never used.

lib/data.js: line 162, col 30, 'ALL' is not defined.
lib/data.js: line 162, col 44, 'ALL' is not defined.
lib/data.js: line 194, col 30, 'ALL' is not defined.
lib/data.js: line 194, col 50, 'included' is not defined.

lib/headers.js: line 290, col 16, 'values' is already defined.
lib/headers.js: line 268, col 56, 'ifUnmodifiedSinceHeader' is not defined.

Here is the way to use Jscs:

node_modules/jscs/bin/jscs *.js lib/*.js test/server/*.js

Line must be at most 80 characters at lib/server.js :
73 | * all registered servers are also started and the same for stopping.
74 | *
75 | * The simplest way to add a server is to provided a protocol and the associated port, as described below:
76 | *
77 | * component.addServer('http', 3000);

Missing space after line comment at lib/server.js :
94 | */
95 | addServer: function(protocol, port) {
96 | //TODO: support configuration object as second parameter
97 | serverConfigurations.push({
98 | protocol: protocol,

Expected indentation of 6 characters at lib/server.js :
95 | addServer: function(protocol, port) {
96 | //TODO: support configuration object as second parameter
97 | serverConfigurations.push({
98 | protocol: protocol,
99 | port: port

3 code style errors found.

Additionally you can add these command lines directly within the file package.json of your project to make them more convenient to use:

  "name": "myproject",
  "description": "Project description",
  "version": "0.4.1",
  "scripts": {
    "code:jshint": "jshint lib/**.js test/**/**.js",
    "code:style": "node_modules/jscs/bin/jscs *.js lib/*.js test/server/*.js"

Here is the new way to launch them:

$ npm run code:jshint
$ npm run code:style

You can also notice that main JavaScript task runner like Grunt or Gulp provide support to such tools.

Here is a sample configuration within a file Gruntfile.js for a Angular application generated using Yeoman:

jshint: {
  options: {
    jshintrc: '.jshintrc',
    reporter: require('jshint-stylish')
  all: {
    src: [
      '<%= %>/scripts/{,*/}*.js'
  test: {
    options: {
      jshintrc: 'test/.jshintrc'
    src: ['test/spec/{,*/}*.js']

The main drawback is that this approach isnt so much convenient and can discourage developers. As a matter of fact, you need to execute the command, note the line of the problem go into the corresponding file, fix it and then go again into the console to see the next error and so on. You can have the feeling of wasting time and, when you have one hundred errors (this can come up quickly), fixing all is very boring. Most of time, you give up (me first!).

Hopefully there is another way to fix these errors. This definitively reconcile me with such tools! This allows to have access directly to errors within your text editor or IDE.

Using within Sublime 3 text editor

Sublime 3 provides an integration with both Jscs and JSHint that relies on the generic module SublimeLinter

Installing plugins into Sublime 3

The very first thing to do here is to install the Package Control for Sublime 3. There are two approaches at this level. They are described at the link You can either copy the provided code within the Sublime console or save the corresponding package into the folder .config/sublime-text-3/Packages under your home directory.

Having done that, you can then the Sublime Linter module and its associated modules leveraging the Package Control. The following link gives you precious hints about the way to do this:

  • Open with the shortcut Ctrl + Shit + p
  • Type Install
  • Select Package Control : Install Package
  • Type Enter
  • Type jshint
  • Select the package SublimeLinter-jshint
  • Type jscs
  • Select the package SublimeLinter-jscs
  • Type Enter

Sublime Console
Sublime Install SublimeLinter

You have just to restart the editor and you will see the messages directly within editors.

Seeing them in action

Sublime Linter allows to display problems using a circle (yellow or red) in the margin and corresponding message in the editor footer when selecting a line.

Following screenshots show this:

Linter messages
Linter messages

This entry was posted in JavaScript. Bookmark the permalink.

One Response to Checking your JavaScript code

  1. Pingback: Javascript Quality Checking Tools | Javascript

Leave a Reply

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

You are commenting using your 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