Lesson Weekend

We're going to take our JavaScript up a notch in this class by learning how to use a linter. A linter is a tool that analyzes code and warns about parts that don't follow stylistic conventions, or could cause bugs in the future. Following the suggestions of a linter will help keep your code consistent and easier to debug. We're going to learn to use one of the most common linters called JSHint.

Linting with JSHint

JSHint is available through npm, so let's start off by installing it as a development dependency. We'll need the jshint package itself, and then we'll need the gulp-jshint package to allow us to write a gulp task to automatically check our code using the linter.

$ npm install jshint --save-dev
$ npm install gulp-jshint --save-dev

Automated Linting Tasks

Now, let's add our require statement and the gulp task. We don't need to require the jshint package, only the gulp-jshint package. Gulp will automatically use the jshint files that we downloaded. Here is what your task should look like:

gulpfile.js
[...]

var jshint = require('gulp-jshint');

gulp.task('jshint', function(){
  return gulp.src(['js/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});


[...] 

Let's put this task at the very bottom of our gulpfile since we will run it separately from the chain of build tasks. This is a good task to run periodically as you develop, and when you need some help debugging.

We are pulling in all the JavaScript files in our js folder, running jshint on them, then using the default jshint reporter to show us our errors. To try it out, just run the command:

$ gulp jshint

In our case, it is pointing out a missing semicolon in js/pingpong.js on line 19:

[03:15:49] Starting 'jshint'...
js/pingpong.js: line 19, col 2, Missing semicolon.

1 error
[03:15:49] Finished 'jshint' after 69 ms

It wasn't causing any errors, but it's a good idea to fix small things like this to prevent errors in the future.

Optional: JSHint and ES6 Syntax

Some students have opted to independently learn ES6 during this week of the course. ES6 stands for ECMAScript 6, and is essentially a few extra JavaScript capabilities and features added atop the primary language. We'll begin exploring a little ES6 later in the course when we jump into the Ember and Angular frameworks. You're not required to learn about ES6 yet.

However, if you would like to optionally, independently explore ES6 this week, know that you'll need to complete additional JSHint linter configuration order for it to recognize ES6 syntax:

  1. Make sure your project contains the ES6 syntax you're hoping to use.
  2. Run your $ gulp build task we created in the previous lesson.
  3. You should receive an error in the command line.
  4. In the root directory, run $ touch .jshintrc to open JSHint's configuration file.
  5. Add the following to this file, then save, close, and run $ gulp build again.
{
  "esversion": 6
}

Note that the 6 in the snippet above must be an integer, not a string.

Terminology


  • Linter: A tool that analyzes your code and warns you about parts that don't follow stylistic conventions or could cause bugs in the future.

  • JSHint: A specific linter tool that can be installed with an npm package.

Examples


An example gulp task that uses JSHint to lint JavaScript code:

gulpfile.js
var jshint = require('gulp-jshint');

gulp.task('jshint', function(){
  return gulp.src(['js/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});