Setting up a project with ESLint

- [Instructor] It's pretty straightforward to add ESLint to a project using a package manager. In the folder for this video, I can add ESLint as a dependency. With npm install eslint and then I'm going to do a save dev. Save it as a dependency. So this is actually installing that ESLint package for this project. And I'm not worried about warnings here so we're going to go on as long as they're not errors. And next, I want to use npx to run ESLint with the init flag. So that's npx eslint double dash init. And that's going to kick off the ESLint set up wizard. So the first choice covers how I want to use ESLint. For now, I just want to check syntax and find problems without getting into my code style. So, I'm just going to press enter and take that default. Next is a choice about which module style ESLint should expect. Import export is fairly common. But if your project is used in common JS syntax or no modules at all, you can specify that here. I'm going to use that default, press enter. And next up is frameworks. ESLint can provide framework-specific integration for both react and view. My project doesn't use either of those so I'm going to choose none of these and press enter. If you choose one of those others, you will be presented with additional framework-related questions later in the config process. Next is a question about typescript use. If you're using it, you can specify that here so ESLint can parse your code as TypeScript rather than as you know, a JavaScript. I'm not using TypeScript in this project and the default here is N, 'cause we have that capital N so I can just hit enter. Next, I need to specify whether my project contains front-end code, which runs in a browser or back-end code that's executed in the node environment. My project is front-end code. So I'll keep that default selection and press enter. And next, it's a question about the format of the config file. ESLint needs to save all the configuration options I just set. And I can choose from a few different formats. If you're planning to share the config file that ESLint generates with other people working on the same project, or if you're more comfortable in one format or another, you might have an opinion about the format. But you can store the same data in all of them. And I'm going to accept that default and generate a JavaScript file. And I get this message that eslintrc.js file has been created. This is the ESLint configuration for my project. So, I want to look at my new file list now. So I'm going to clear my terminal first. And then I'm going to use an ls and I'm going to do a -a so I can see my dot files as well. And right over here, I've got that .eslintrc.js file that was just created. And over in my editor, I've got my package that JSON file open. And first off, I can see that eslint has been added as a dev dependency. And then I've also got my .eslintrc file. And if I open that up, I have a module that export statement with a set of keys. There's an env for the environment. And a few other configuration options. And then at the bottom, there's this rules key. And this is where I can specify any custom rules that I want ESLint to enforce. For now, with this default configuration, this extends key is specifying the ESLint-recommended set of rules. So any lint I do on my project will be based on those recommendations. ESLint allows you to configure a lot of rules and provides extensive documentation on each rule. On ESLint website, the rules with check marks next to them are included in the default recommended configuration. Back in my package.json, I can create a command to run ESLint on the current project. I'm going to use link as the name for my command. So, after the existing build command, 'cause my project uses webpack, I'm going to add another command called lint. Now the syntax for using ESLint is the term ESLint followed by one or more files or folders to lint. I'm going to specify the source folder as rc which contains my index.js file. So, my command here is going to be eslint space src. And I'll save those changes. Now, if you want to try out setting up ESLint on a project of your own, this is a good time to pause the video and give that a go. Then you can join back up and we can walk through testing it out. And so, returning to the terminal. I'm going to clear that. And I'm going to try npm run lint. And I've got an error message here but this is actually a good thing. Because if I dig up above the error messages, I have a very descriptive note here. And this is actually referencing an eslint rule. No unused vars. So, again, eslint can configure tons of things in your project. Here, one of the default rules is that you shouldn't declare a variable unless your code actually use it. And it's flagging that I declare this very rule text but didn't actually use it in my code. So this is actually really useful and this is why we love ESLint. So, I'm going to go back to my code. And in that source folder, I'm going to go open up index.js. There is my text variable. And just so I can use this and see how this affects the error, I'm going to go ahead and add console.log text. Save that. And then back in the terminal, I'll go ahead and reissue that last command npm run lint. The command execute it and back at the prompt. So this time, there were no issues at all. So that means that the code in my file follows all the rules that ESLint is currently configured to enforce.