This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Adding an ESLint CLI Script" Lesson
[00:00:00]
>> Brian Holt: Now what we can do is when you go over to our package.json,
>> Brian Holt: Package.json, just like we have format and format check here, we are going to do lint,
>> Brian Holt: And we are gonna have it "eslint **/*.(js, jsx)". I think that's what I did.
>> Brian Holt: And put those in quotes as well.
[00:00:37]
>> Brian Holt: Just make sure that works, and mpm run lint,m
>> Brian Holt: Yep, looks like that's working.
>> Speaker 2: What was the plugin install?
>> Brian Holt: We installed this one here, eslint-plugin-prettier.
>> Brian Holt: So again, we're doing this more for something that, we could run this now lint command in CI. And have our build fail if it didn't pass lint.
[00:01:15] Actually, even better is you can have it on a Get hook, so that anytime someone tries to commit to your code base, it runs the lint and the prettier to make sure that they're going to pass, right? And it won't let them check in locally, even before they try and push out to production.
[00:01:32] So that's a good idea too. I won't necessarily show you how to do that today, but there is a library called Husky that will let you do that.
>> Speaker 2: How do you spell that?
>> Brian Holt: Husky, like the dog, H-U-S-K-Y.
>> Brian Holt: So now, we can go over to our command line and say, mpm run lint.
[00:02:00]
>> Brian Holt: And you can see here we have this undef thing which is what we should be seeing right? We're using this global react variable that eslint knows nothing about. So it's just I don't know what this is. I assume it's an error, which is correct, right? That's what I should be doing.
[00:02:19]
>> Brian Holt: So the no-undef is the name of the rule that's failing. So if you look at it then I don't know what that means. Just Google eslint no-undef, just do it.
>> Brian Holt: Eslint no-undef, right? The first thing is always gonna be the documentation for that rule.
>> Brian Holt: So you can see here if I have this, it's gonna say hay, I don't know what b is so then it gives you an error.
[00:02:48] So that's how you figure out what some of these rules are. Cuz some of them are a little bit more cryptic than no-undef.
>> Brian Holt: But again, this is great. This is something you can give your curmudgeon colleague that won't install anything to their editor. However, I like just seeing these things directly in my editor,
[00:03:13]
>> Brian Holt: So let's see,
>> Brian Holt: What you can do here is you can come in and install an extension called ESLint. And I already have it installed.
>> Brian Holt: And,
>> Brian Holt: You can see now underneath my code, I can actually see the eslint errors directly in there. And if I hover over it says hey, react is not defined, no-undef, right?
[00:03:52] Because we're using React as a global variable and it does not know where it's coming from. We'll fix that here in a second but, so how do we fix that? If I was doing this this way and I wanted to come in as a global variable, you can either go add that into your prettier, or your eslint config.
[00:04:10] Or you can come at the top here and say,
>> Brian Holt: Global React and it should shut that up and react on.
>> Brian Holt: And so now you can see, here the type is like, I know these are global variables that are coming in, so do not error on that.
[00:04:32] We're gonna fix it here momentarily so, I'm gonna take that out but that's how you do it.
>> Brian Holt: Questions about that?
>> Brian Holt: Sometimes mpm or eslint can be kind of a pain to set up. Is, for me, you have to get it just right and just tuned directly.
[00:05:03] So something useful you can do is say, debug -- --debug like that, and it's gonna give you like all of the subsets. I loaded this from here, I'm gonna do like it just like it gives you a whole bunch more info about stuff that normally you don't wanna see.
[00:05:22] But when you're setting it up, it's really helpful to see. So that's how you do that. This -- right here, this is something that you can pass in to eslint to let it know. I'm gonna pass additional things that I want you to pass on to whatever command that is you can see here.
[00:05:40] It run the first part first, right? So this is what I had to find on my package.json. And then it also pass in --debug, so that's what that -- is in it pass, pass in more parameters. Is that make sense? Okay, cool.
>> Brian Holt: Something else that eslint can do for you, in this particular case we have nothing to fix.
[00:06:05] We can pass and --fix as well. There're somethings that eslint can knows how to just fix by itself. We have nothing to fix. So, because these are not necessary fixables. It doesn't know how to fix global variables, but some other things are quote unquote fixable. So often here on,
[00:06:26]
>> Brian Holt: My package.json I'll also just put,
>> Brian Holt: --Fix but, anyway.
>> Brian Holt: Anything else I wanted to cover here?
>> Brian Holt: Nope. At this point there is another, if you've fallen behind, there is another commit here. So feel free to catch up that way.
>> Brian Holt: Cool, let's keep going then, we have a prettier in place, and we also have, he has lint going for us.
[00:07:11] So now the next thing we wanna do is we wanna introduce our built process. Alternatives for eslint that was the last thing I forgot. Alternatives for eslint, if you don't wanna use eslint, just use eslint. But [LAUGH] There are two other tools one's called JSLint and one is called JSHint.
[00:07:28] JSLint is quite old, and it's not configurable, it's not a lot of activity on that repo or anything like that. I don't suggest JSLint, it's from Douglas Crockford, who is really smart. And if you follow his school of thought perfectly, then go right ahead. But it's not gonna help you with React, cuz there's no React rules for JSLint cuz there are no configurations for it.
[00:07:51] There's a new called JSHint. New were one I should say, that has more rules, was more active, people still like it. But again, not separate configurable in terms of like adding new rules and stuff like that. So also won't help you with react. So JSHint is out there as well.
[00:08:13] So eslint came along after that, and now it's configurable, and plugable so you can have like React rules and prettier rules. And it's able to move as fast as an ecosystem, because you can build plugins for it. So I would definitely suggest just sticking with eslint. Yeah, question?
[00:08:28]
>> Speaker 3: If you use the eslint, how do you solve for the reactors not defined? Besides having to import it in every file. Because often in your projects it's in your node module, or it's globally installed.
>> Brian Holt: Yes, the question is, how can you do global variables? I'm trying to remember, it might be globals,
[00:08:52]
>> Brian Holt: "React ":true, I think this is it. Dangers of live coding, and that's what it is. Yes, nailed it, [LAUGH] So here in your eslintrc, you just define globals as if you see this, just ignore it. Answer your question? Yeah?
>> Speaker 3: So is there a way to, automatically like add this as you add in packages, or is it like every time you added a package that, okay, react on.
[00:09:21] Now, I know in my eslint, I'm gonna add this globals, like React on.
>> Brian Holt: Yeah, I don't think there's a way to automate that and I don't think you'd want to. You want to be pretty, you should not have any globals, to be honest with you. I never have any globals in my projects.
[00:09:38] Sometimes I'll turn on these ends, later we're gonna turn on Jest as well because we're going to have Jest going on. But maybe Google Analytics, that might be it, or whatever. We have app insights at Microsoft, like whatever one you're using. But, I can imagine anything else.