7 days of WordPress plugins, themes & templates - for free! Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 File Linting

One of the cornerstones of any JavaScript build system is a file linter. Linting is a process where individual files are scanned to check for common errors and bad practices. It’s easy to make simple mistakes when writing code, and something like an accidental global variable can cripple your application. So it makes sense to check for these errors as part of a build. In this lesson I’ll show you how to install and configure the popular JSHint linter.

Related Links

2.1 File Linting

Hi, folks. In this section of the course, we'll focus on static analysis, starting in this lesson with the popular linting tool, JSHint. So first of all we need to install JSHint and the Gulp wrapper JSHint. And as the default JSON reporter is a little plain, let's add the excellent jshint-stylish reporter. Now we need to add a little configuration to jshint, and commonly this is done by adding a .jshint RC file to the project which contains all of the configuration. I've got a nice strict version of this file as a gist up on GitHub, so we can use that. And if we just hit the Raw button on the right hand side here, we can ignore the parsing error and we'll just download that to the project. So let's create a new directory for this. We'll just call it config. So we just need to fix the filename with that. As you can see, it's currently called _jshintrc.txt. That's not right. To face this on Windows, we just need to replace the underscore with a dot and take the txt extension off the end. And it will ask us if we want to change it, so we just need to say Yes here. And if you're not using Windows you can probably just save a file that begins with dots and doesn't have an extension without any problems. So you probably only need to do this if you're on Windows. So let's just take a quick look at this file. And as you can see, it's basically just a giant JSON object, and all of the configuration options are specified as keys in the JSON objects and their values are the value for those configuration settings. As I mentioned earlier, this is a pretty strict configuration. If you do want to tweak any of the options at all, you would have to do that inside the file. And if you get stuck, the jshint website does contain documentation for every single one of these properties. So they're very easy to look up to see what value they should have. Mostly they're just true or false. But for some of the properties you do need to specify other values. So now let's add a Gulp task that will run jshint for us. We need to add a new file now to the gulp_tasks directory called jshint.js. First of all, we need to require both gulp and jshint. As with the gulp test task that we added in the previous lesson, this file should be a module that exports a function. And we can use the same ES6 fat arrow syntax that we used before. We're gonna be using this in most of our tasks. So JSHint requires a set of source files to scan for errors. To collect those source files, we can use Gulp. To get the source files we can use Gulp's src method. We can use a standard Gulp pattern as the argument that we pass to this method, and that will collect all of the JavaScript files in any subdirectory within the src directory. So the src method returns the files that have been collected. We then need to pipe the source files to JSHint using the pipe method, And what we wanna do is pipe these to jshint. And we do that just by invoking the jshint module that we collected at the start of this lesson. You can just see it above there, jshint = require('gulp-jshint'). So it's actually the gulp-jshint module that we're invoking at this point. And we need to tell JSHint about our configuration file. And that's not at the root of our project, so we need to specify a path. So the pipe method is actually a nodejs method. It's not a gulp method. And that parses a readable stream, which in this case is the set of source files to a writable process. The writable process in this case is jshint. So now we need to pipe the response from jshint to a jshint.reporter. Let's just use the default one first of all. So we used the pipe method once again, this time invoking the reporter which is a method off of the main JSHint module. So at this point, we should be able to run our new task, but we need some files to lint first of all. So inside the src folder let's create a new folder called js. And inside this, let's just create a new file called lint-test, And let's just add some code that contains some lint. So let's go to the command line now. And we can run this using gulp-jshint, because the name of our file in the gulp_tasks folder is just called jshint. And the reporter does print out some results there, and the task finishes. It tells us there are five errors. The results are a little bland, so let's just use the jshint-stylish reporter that we added earlier. Okay, so let's go back and run that again now. And as you can see, the results look a lot nicer this time. And if there was more than one file that had lint in it, they would be separated out and you could clearly see which file contained which areas. So one more thing we might want to do is exclude particular files or folders. If we're using any third party code, we probably don't want to lint that. So let's add a new folder to the src folder, and we'll just call it vendor. And now we need some third party code. So I'm just gonna grab a copy of jQuery. And we can just put that straight into the vendor folder. And now let's just try running the task once again. So this time there are a great deal more issues, and those are coming from the jQuery file. So let's just exclude the whole vendor directory from our linting. As well as passing a single string to the gulp.src method, we can also pass an array where we can load multiple files or load multiple files from multiple locations. And we can use this array to exclude particular locations as well. So to exclude all of the files in the vendor directory, we just need to start the path to the directory with an exclamation mark. So now let's try running the task once again. And now this time we don't see any areas from files inside the vendor directory. So in this lesson, we saw how to install and configure the popular file linting tool, JSHint. We saw that we can configure the tool using a .jshintrc file, and that there are many different options we can make use of. We learned how to use Gulp to pipe files between different actions such as when we use Gulp's src method to select some files and then pipe them to the JSHint module. We also saw how to add new reporters and how to exclude files or folders. In the next lesson will move on to look at the code style enforcer, JSCS. Thanks for watching.

Back to the top