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.
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.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality