FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 How to Check JavaScript Files for Errors

In this lesson you’re going to learn how to check your project’s JavaScript files for errors. This check is extremely helpful because, if caught in time, it can really save you from the pain of debugging your app later on.

We’ll be doing all the checking with a plugin called gulp-jshint.

Related Links

4.2 How to Check JavaScript Files for Errors

Hello and welcome back to this course. In this lesson, you're going to learn how to check JavaScript files for errors. And this is a very good, this is a good practice. Catching these errors early on saves you from a lot of headaches and debugging later on. And we're gonna do this with a plugin called JSHint, more specifically Gulp JSHint. So let's go ahead and install that plugin. I'm gonna say npm install gulp-jshint. And also, we're gonna save this as a dependency. Now we're gonna load that plugin. We'll just call it jshint. All right, and the way we're gonna do this is the following. And we need to check for JavaScript errors before we're running concatenation and elimination. So before the js task has been run. And to do that we simply add the name of a task here, lint-js. And then we write it here. Let's see, Check JS for errors. So gulp.task, lint-js, function. And inside, we're gonna say return gulp. We're gonna grab all of the JavaScript files, and we're gonna pipe them through jshint. All right, so let's do a test here. Let's say gulp js. Okay, this says that cannot find module jshint. That's because the Gulp.js hint plugin requires the normal npm.js hint plugin to be installed. So we need to install an additional plug in here, npm install js hint. And also, we're gonna save it as a dependency. All right, so now if we do gulp js Yeah, that's gonna start the lint-js function first. It's gonna finish it. And if everything is okay, it's gonna start and finish the js function. Now, let's see what happens if, for some reason, I make an error here. Actually, let's remove a semicolon and a parenthesis there, and let's run the plugin. Yeah, and surely enough, it's gonna give me an error, but we don't really understand what's going on here, right? It says unhandled error event. So in order for us to see these errors in a more understandable format, we need to use a reporter. And the recorder I'm using is called jshint-stylish. So we're gonna say, npm install jshint-stylish. And, again, we're gonna save as a dependency. Yeah, we don't need to load this plugin specifically. Instead, we can go to our jshint or lint-js task here, and we can pipe this stream through jshint.reporter. Oops, without the quotes here, sorry. So jshint.reporter, and we're gonna paste, or we're gonna pass in jshint-stylish as our reporter. And on top of that, we're also gonna say pipe(jshint.reporter('fail')). And this will basically fail the task on jshint error. All right, so let's try that again. So we haven't made any change to our plugin, we're still missing a parenthesis and semicolon here, but now we're running Gulp.js. Yeah, we're getting a much better understanding of what the error is. It shows us in plugin.js, we have unexpected parentheses, and we didn't see it. It tells us we have one error, one warning. And the plugin simply errored out. So after we correct there and we run that again, yeah, it just works, perfect. This is a super helpful for a catching some of these silly errors early on. You forget a semicolon or a parenthesis. Or maybe you are using a variable that has been declared. And by using such a plugin, you can actually catch these errors when you're actually editing the document. So let's run, for instance, let's run gulp here. All right, so let's say we're working on our project and we're editing our plugin.js and for some reason we forget these parenthesis, right? Well, we save, and because we're watching for file changes, we can catch this error right here, yeah? We save that and lint.js was triggered. It tells us that, well, there is an error. So the js function was not actually executed. If we take a look back in scripts, we can see that the code here is correct. So you go in, you correct the error and then the whole process resumes. lint-js is executed, js is executed, and the browsers are being reloaded. Super, super helpful. So that's about it for working with JavaScript files. We're gonna come back to this in a little bit when we'll implement some helpful plugins but, for now, these are the basics. So, so far we've covered working with HTML, working with CSS, JavaScript, what about images? Well, images, there's not really that much you can do to images. You can copy them from place to place, and you can compress them. That's what we'll be using Gulp for, and we're gonna cover that in the next lesson.

Back to the top