Using JSHint for Linting with Gulp

[00:00] So to start using jshint with gulp we're going to run npm install gulp -jshint. What jshint is going to allow us to do is lint all our JavaScript files and check for errors and warnings. Once the npm install is done, we'll include it in our gulp file by typing in jshint = require('gulp-jshint'). Now we can use it, so first thing we'll do is create a new task, which is gulp.task.

[00:30] We'll go ahead and name this task jshint, and in the second argument of this task inside the function we'll go ahead and specify the files that we're going to be linting with gulp jshint. So we'll go ahead and save in the js directory a file called app.js. Then we can take that file and pipe it into the actual linter itself, which is jshint.

[00:53] Lastly we just want to specify which reporter we're going to use to display to us in the terminals any errors or warnings that are found, and we'll go ahead and just use the default reporter that comes with jshint. We can go into our terminal now and run gulp-jshint and we'll go ahead and see the task jshint was finished in 18 milliseconds. So now that we have that complete we just need to create the file that it's actually trying to lint. So we'll just do js/app.js.

[01:23] The next thing I want to talk about is the configuration for jshint. If you create an RC file called .jshintrc, you can create a JSON object inside whre you can specify certain rules you want your linter to follow. We'll go ahead and just do a simple example of undefined true. So we if we see any undefined variables, go ahead and throw an error. We can make that happen by calling foo.bar inside our app.js file.

[01:46] If we run our jshint task again, we'll go ahead and see that we get the error foo is not defined, and that is spit out to us by a reporter. If we were to define foo by doing var foo = an oject, and inside create a property bar with a function as its value, now when we call foo.bar we will not get the undefined error. So if we go ahead and go back to our terminal and run gulp-jshint, we'll see that everything comes out clean and no errors or warnings are given to us.

[02:19] The next thing I want to talk about is using different reporters in your project. You don't have to use the default reporter that comes with jshint. We're going to go ahead and install jshint stylish to do this, we just run npm install jshint-stylish. Once that node package is done installing we just include it in our gulp file like we did with our other node modules. We'll just call it stylish = require and then jshint-stylish.

[02:43] You can go ahead and stick that stylish variable inside of our reporter argument for our jshint.reporter method. Now if we recreate that undefined error, we'll see that when it is spit out to us in our terminal, it's styled a little bit differently with some color, specifying that it was a warning, little bit easier to read. Jshint-stylish is my personal preferred reporter that I like to use with gulp-jshint. Next thing I want to talk about is combining tasks.

[03:14] So for example, if we want our default task to run our jshint task, we just replace that function argument with an array of strings being task names. So now if we just run gulp we'll see that our default task and our jshint task were both ran. You can go ahead and stick as many tasks in that array as you'd like, and they will all get run when you run your default task.

[03:37] Another common thing I like to do is rather than hard coding the path inside of the source argument for gulp, I like to make a variable called paths which is an object where I store my JavaScript paths, maybe my less paths, CSS, HTML files, et cetera. So I can go ahead and reference paths.js now, run gulp again, and we'll see that it is still able to find and lint that file.

[04:02] Another good technique is rather than specifying a single file, we can grab multiple files by using the globbing technique throwing in a wildcard, so *.js. We'll see that when we run gulp again, our app.js file is still found.

[04:17] Let's make another file called secondary.js, go ahead and put some code in there that will also throw an undefined error so that if we come back down into the terminal and run gulp again, we'll see that both the secondary.js and app.js both threw an error because they're all captured through our globbing technique we used with the wildcard. We can go ahead make the file paths an array.

[04:38] This allows us to include multiple directories and JavaScript files within those directories. For example if we make an app directory and go ahead and create a JavaScript file inside of that, and once again, inside that JavaScript file we'll put some more code to throw another undefined error. We'll see that our jshint task is able to catch all of those. So we should get hello, foo, and bar are undefined in our three separate files that are in two different directories because of the way that we specified our wildcard file paths.

[05:10] I'll go ahead and get rid of this code so that we don't throw any more errors, and we can see that when we run the task that it's nice and clean now, no warnings, no errors. The last thing I want to talk about is global variables. For example, you may be creating an Angular application and you want to call Angular.module.myapp with no dependencies to inject. If we run gulp we'll see that angular is not defined.

[05:32] We don't want this error to be thrown because Angular is available on the global scope because we've included it in our index file, or wherever we have throughout our application. To take care of this we can create a globals key inside of our jshintrc file and specify that for Angular, we do not want to throw errors, because that's a global that we're expecting. So if we go ahead and run gulp again we'll see that our reporter comes out nice and clean, no warnings, no errors.

[05:57] That's the basics of getting set up with jshint inside of gulp.