Check out a free preview of the full Complete Intro to React, v6 course:
The "ESLint" Lesson is part of the full, Complete Intro to React, v6 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through the setup of ESLint which is a tool used to help enforce code style opinions on a project. ESLint will display errors where the preset style rules are being broken which can help create consistent code styling.

Get Unlimited Access Now

Transcript from the "ESLint" Lesson

[00:00:00]
>> Okay, so we just talked about prettier, prettier is the tool allows you to format your code and make it look really nice. I'm a big fan of prettier, the next thing we're gonna work on is ESLint, so ESLint is another one of my favorite tools. It allows you to have opinions of enforced in your code whereas produce much more like syntactically.

[00:00:20] It's like putting, commas in the right places and single quotes or double quotes and spacing. ESLint is going to be kind of more higher level more opinionated. It's going to be like, hey, we don't use arrow functions here or we only use single quotes. In these kinds of contexts or those kind of things, things we are enforcing like your opinion on someone else.

[00:00:40] Now don't get me wrong, this overlap there, right? ESLint and prettier can both worry about spacing, you definitely only want prettier to worry about that. And ESLint to worry about more opinionated things. But for, I'm going to teach you how to set them up together so they kind of work together, in a good way.

[00:00:57] So the first thing I want you to do, cuz I want you to, come in here to your terminal and we're gonna say npm install -D eslint@7.18.0. And eslint-config-prettier@8.1.0 sorry 8.1.0. Okay. So this is gonna be a pretty Anya pin unopinionated version of eslint config. You can make ESLint very opinionated In fact, in previous versions of this course actually taught the Airbnb config.

[00:01:53] Adopt the standard config, there's several of them. In this one, I'm just gonna actually make it so it's just, eslint recommended. Which is a pretty, lacks but still really good configuration for es lint. So, once you have those installed, I want you to go create a file. Here, called ESLint, RC.Jason.

[00:02:24] That's gonna be right next to your prettier RC as well. Okay, so have both of those, make sure it's .eslintrc.json. It's very significantly you call it so it doesn't work if you don't call it the right thing. Okay? Opening curly braces and we're going to have it to extends, there's gonna be an array and you're gonna have eslint, Colon recommended.

[00:02:59] Okay, and then prettier. So the order here is significant, you need to put the first one as eslint recommended, this is going to turn on a bunch of options. And this is also going to turn on like whitespace rules, and we need to turn off those rules and that's what the prettier config does.

[00:03:17] The prettier config doesn't add any rules or doesn't know, turn on any new features of the essence. It actually just turns off features that it checks for, right? So that's why we have the prettier config, okay? We're not going to have any plugins, so you can put at empty for the moment parser options.

[00:03:39] We're going to be working with ECMA, version rather ECMA. EcmaVersion, and we're gonna do 2021 because it's 2021, we're gonna do source type module. This is just telling you like am I doing common js, am I doing like browser stuff? We're going to be using ES modules, so that's where that comes from.

[00:04:07] They want to have ECMO features and we're gonna be using JSX here in just a second. You have to say JSX true, just so it expects that. And then underneath that we're going to have what environments we're working in. So m colon Object, we're gonna be using es16.

[00:04:24] So this is could be like map or weak map or set like those are like those Globals that it's expecting. So that's gonna be true When a browser so this is gonna be things like window and fetch and anything that you can refer to globally. So true for that, and then eventually we'll be using some node stuff as well.

[00:04:52] So go ahead and set that to true as well, that'll be things like process and global and other things like that. Okay, so this should be everything that you need to get started with estlint. So again, I'm just doing eslint recommended, but you could also go install the Airbnb config, in which case you'd look like this, right?

[00:05:17] Or you could do standard, you'd have to go install those plugins to this one or presets. But for us, for now, we're just gonna do estlint colon recommended. And I just like the less, opinionated take on this now because for the most part, eslint introduces friction to your process, right?

[00:05:34] You're writing code and it's making you stop and rethink your code. And unless it's truly necessary, I like to let developers write code how they think about it. So this is a less opinionated set, it's gonna have things like you created a variable that you never use. Or you're referencing a variable that you never created or, here's a syntax error in some capacity.

[00:05:56] There's a bunch of like, just good idea things here that are going to prevent bugs. So I recommend that. Okay, we're going to package that JSON now, and we're going to add another script here. And this script is gonna say lint, and whenever we call lint, we're gonna say eslint and we're going to.

[00:06:24] You can actually even copy and paste this, it's gonna be the same one as we did for prettier. And then you can say --quiet, the reason why we do quiet is eslint can be, has a lot of stuff that can come out of it. And for the most part, we don't need all of it, we just want to know if something's wrong.

[00:06:41] So that's what the quit does, but if you want to see all that, just remove that and it'll show you all the verbose output. So let's go ahead and run it, make sure it works, ao if you say npm run lint, you should see a bunch of errors.

[00:06:57] So you can see here all this reactors is not defined ReactDOM is not undefined. So if we head over to our source directory here and look at app.js you can see it's underlining now. And I'll show you how to get that in your editor here in just a second, but it's like, hey, I don't actually know what React is.

[00:07:13] You're referencing this thing called React and I don't know what it is. It's okay because we put it in there via the script tag here, but it doesn't know it's there. Now, if you need to ignore that, what you can do here is you can at the top, put this global react.

[00:07:30] And I was like, okay, you're expecting a global call to react, I'm good with that. Same thing with react DOMm and if I said that, notice that there's no errors and if I came back here and do run lint No errors. Now we'll fix this momentarily, so I'm just gonna take this out, but that's how you would do that.

[00:07:50] So let's install the extension for VS code now, if you click here, and search of eslint. This top one here with the star, the eslint dbaeumer, I don't know how you say it, Dirk Baeumer. Installed that one, and then that will just integrate nicely, you might have to restart your VS code.

[00:08:12] But now you'll start seeing these underlines, in this case, we're violating the no undefined. But same thing here, if I say like const x equals five, you'll see that we'll get that hey, yes, Lin says oops He can't do unused variables. I think you can even click on this and I click Open, this will actually take me to the ESM documentation.

[00:08:36] Where it says like, okay, here is exactly the rule that you're violating. So that's the essence, we'll keep expanding upon our configuration here but this is a good place for us to get started with.