Automate script linting

- [Narrator] If copying and pasting your javascript into an online interface to check it seems like a lot of work, it is, especially if you write a lot of JavaScript. Fortunately, we don't have to do this. There are command line tools available for most JavaScript linters, they hook up to your favorite task runners, and in some cases, these interface with popular code editors like Atom. To use these tools, you need some familiarity with the Node Package Manager, or NPM for short, and command line tool configuration. If you've never used NPM, or need a refresher on how to get it set up and working on your computer, check out Ray Villalobos short course, Up and Running with NPM, the Node Package Manager, and come back here.

In this movie, I'll show you how to use the ESLint JavaScript linter in Atom, for on-the-fly linting of your JavaScript. "But Morten," you say, "in the last movie, "you told me to use JSHint." That's true. If you need an online linting tool, I recommend JSHint; if you need a command line tool that integrates with Atom, ESLint is better, and has more support. That said, it's not the only option. You can also check out XO, which is a wrapper for JSLint, although, then you end up with a super picky JSLint warnings in your editor, so really just go with ESLint and you'll be fine.

To get ESLint to work, we first have to install a command line tool in the terminal. This requires NodeJS and NPM, so if the following doesn't work, go check out Ray's course, get yourself set up right, and then come back here. To start myself off, I've navigated to the exercise files folder for this movie, 11_06. From here, I'll first install ESLint globally. So I'll type in, npm install, -g for global, and it's called ESLint.

Now NPM goes onto the internet, finds the ESLint package, pulls it in and installs it on my computer. Once that's done, I get this huge pile of messages, that means everything is working properly, I'll just clear the screen so you can see what's going on. Next, I need to set up an NPM environment for my current project. This will include all the things we need to get ESLint to work properly in our project, and you can do this for each individual project. I'll type in npm init.

From here, I'll get a bunch of questions about my project, I can choose to fill them out or not. So for our purposes, I'm just going to ignore everything. Just hit enter to get through it. Yes, all this is okay, and clear again. What I have now is a new file, package.json, in my project. This package file tells Node which packages are related to the project, and where the dependencies are, so that everything can work. If you're not familiar with Node Package Manager, this may seem convoluted, it's not, it just runs in the background, this is all to help the computer.

To get ESLint to work, we first have to set up some configurations for it. So I'll type in ESLint --init Then we get some questions, "How would you like to configure ESLint?" You can either answer questions about your style, use a popular style guide, this last option would inspect your existing JavaScript files and try to figure out what your coding preferences are. I'm going to select "Answer questions about your style." "Are you using ECMAScript 6 features?" Yes.

"Are you using ES6 modules?" No. "Where will your code run?" In the browser. "Do you use CommonJS?" No. "Do you use JSX?" Nope. "What style of indentation do you use?" In this case, it's tabs. "What quotes do you use for your strings?" In my case, it's double. "What line endings do you use?" Just going to leave that at Unix. "Do you require semicolons?" Yes. "What format do you want "the configuration file to be saved in?" JavaScript is fine.

That's it, now a new file is entered into my project here, called eslintrc.js, that contains all of those configurations; if you're not happy with these configurations, you can just go back, run ESLint init again, do the whole process over, or try one of the preconfigured packages, or do something else, but for us, we don't have to do anything else right now. Now we need to set up the Atom side of this equation, so that Atom displays all the ESLint information when we write our JavaScript. This starts by going to file, and settings.

From here, navigate down to install, and search for ESLint, we're searching for packages. This first option is the correct one, called linter-eslint, so click install, and once again, this application goes onto the internet, finds the correct packages, and downloads them into my settings, in my installation of Atom. In the case of linter-eslint, there are a bunch of dependent packages, so as this installation runs forward, I'll be asked to install a bunch of extra stuff, I'll just say yes to all of it.

Here we have the first one; I think there are a total of four packages that need to be installed here. And when linter-eslint and all it's dependencies have been installed, you can close settings. And now when you go back to your script, you'll see you have a bunch of warnings. So here there's a total of 56 warnings. That's quite a lot; if we go through them from the top, you see at the top here it says missing semicolon on line two, that's here, and there's missing semicolon here, then it probably has an issue with my indentation here, so I should probably clean that up.

And I have a feeling that issue goes all the way down here. Uh, yes it does.

And if I look closer, you can also see I have this timer is not defined issue, that is all the way at the top here. We need to set this up as something, so I'll set that as a variable, that should fix a whole bunch of these issues. Then we have this text matched that does nothing, says down here defined but never used; we'll take that away. Finally, we have unexepected console statements here. And strings must be double quote, here.

Now ESLint says my script matches my own coding preferences, I can save my file. Now I can start adding in new information, and ESLint will keep track of what I'm doing as I'm working. So if I set up a variable, give it the name house, then give it a value of zero, and now it says house is assigned a value but never used, and missing semicolon, so I can add in my semicolon, and then figure out where to use it somewhere. The point of having this tool running in Atom all the time, is it'll constantly remind you to write proper JavaScript.

However, after having used it for awhile, you'll notice that it can get super annoying. If that's the case, you're probably ready to graduate to the next level, which is to have ESLint run in the background using a taskrunner, and then give you reports every time you save the file instead. But for now, run ESLint while you're writing your JavaScript and you'll see immediately if you make any mistakes, and it'll tell you exactly how to fix them.