As stated in the first chapter, JavaScript is not a compiled language, but running the code (as in the case of automated testing) is not the only way to check for errors.

A whole class of tools is able to read source files, interpret them, and look for common errors or bad practices without needing to actually run the source files.

A very popular tool is JSHint—a simple binary that can also be installed through NPM, as follows:

npm install --save-dev jshint jsxhint

You can see that we are also installing JSXHint, another tool to perform static analysis of JSX files. It is basically a wrapper around the original JSHint while performing the JSX transformations.

If you remember from the previous chapter, JSXTransformer doesn't change the line numbers, so a warning in a given line number on a JavaScript file will be in the same line number in the original JSX file.

To execute them is very simple, as follows:

./node_modules/.bin/jshint .
./node_modules/.bin/jsxhint .

However, it is also a good idea to have them running whenever we run the tests:

"scripts": {
    "start": "node bin/server.js",
    "test": "./node_modules/.bin/jshint . && ./node_modules/.bin/jsxhint . && ./node_modules/karma/bin/karma start karma.conf.js",
    "watch-test": "./node_modules/karma/bin/karma start karma.conf.js --auto-watch --no-single-run",
    "build": "webpack -p",
    "dev": "webpack-dev-server --inline --hot"
  },

The final step is configuring what errors we want JSHint and JSXHint to catch. Once again, we create another configuration file at the root folder of our project, this time called .jshintrc:

{
  "esnext": true,
  "undef": true,
  "unused": true,
  "indent": 2,
  "noempty": true,
  "browser": true,
  "node": true,
  "globals": {
    "jasmine": false,
    "spyOn": false,
    "describe": false,
    "beforeEach": false,
    "afterEach": false,
    "expect": false,
    "it": false,
    "xit": false,
    "setFixtures": false
  }
}

This is a list of option flags either being enabled or disabled, where the most important are the following:

There is also a list of globals variables used by the tests to prevent errors due to the undef flag.

Head over to the JSHint website at http://jshint.com/docs/options/ for a complete list of options.

The only missing step is preventing the linter from running in other people's code (Jasmine, React, and so on). This is possible by simply creating a file with the folders it should ignore. This file called .jshintignore should contain:

To run the static analysis and all the tests is now as simple as this:

npm test