This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "ESLint Configuration" Lesson
[00:00:00]
>> Brian Holt: So back to our eslint.json.
>> Brian Holt: So, we're gonna create a file here, this one we do have to configure a little bit. So, the first one we say is extends, and we get an array of things that extends, right? So this is like sets of rules to use.
[00:00:16] So, the first one that I'm gonna say is use eslint:recommended.
>> Brian Holt: Then we're gonna use prettier and prettier/react.
>> Brian Holt: So, what is extends, right? So ESLint is configurable down to the rule, right? So there is probably hundreds of rules that you can use with ESLint. We're going to be using, basically, like the bare minimum set here, which is eslint:recommended.
[00:00:48] Like everything in eslint:recommended everyone should be running all the time. I don't think it's a controversial opinion to state, right? It's a pretty bare minimum set of things, like don't have variables that you never use. That's one of them, right? Or don't use with or something like that, right, which is like a super old construct in JavaScript.
[00:01:06] Now, there is a bunch of ESLint configs, right? There's standard, which I taught previously before. There's airbnb, which is one that I taught as well before. And those ones are much more opinionated. And so I've kind of just started using esl recommended because, again, it kind of goes along with my methodology that anytime that you introduce friction to a developers' ecosystem, they start writing codes slower because they're fighting with tools instead of writing code, right?
[00:01:36] So, in general, I want developers to write code however it flows into their brain, right? And not hinder them, and only hinder them on things that are totally necessary, right? So this will catch bugs, but it's not gonna force you to write code in a specific way. Does that make sense?
[00:01:52] And how opinionated you wanna get about that is up to you.
>> Brian Holt: Okay, so this is those, we're gonna say plugins. We're not gonna give it any plugins right now, but just lets go ahead and put that in there, we will put some in there later.
>> Brian Holt: ParserOptions,
[00:02:11]
>> Brian Holt: Okay, so the ecmaVersion we're gonna be using, let's do 2018.
>> Brian Holt: So we're gonna be using the latest version of it that it understands, which is 2018. I don't think 2019 is quite out yet. SourceType. We're gonna be using modules, ecmaFeatures, we're gonna be using jsx, which is to true
[00:02:42]
>> Brian Holt: So, ecmaVersion 2018, this means we can use things like async/await, we can use things like things like that. Module means that we're gonna be using import and export, right, es modules. EcmaFeatures, jsx in a second, we're gonna be writing jsx here. So we're just going to put that in there so it understands that.
[00:03:07] And then two more things down here at the bottom. Env, we're going to be using es6, so it's not going to choke on things like a async/await, for example.
>> Brian Holt: So, es6 true, one of them is going to be browser true. So this means there's going to be things like setTimeout and document and window and things like that.
[00:03:36] And node, cuz eventually we will be writing node later in this class. So, don't choke on things like HTTP and require, and things like that. So these are your defining global variables, okay? I use this ESLint file frequently, so this is a pretty good just like baseline ESLint file, it's not super opinionated.
[00:04:02] Okay, next thing I want you to do inside of your package.json, we're gonna put another command in here. And put lint,
>> Brian Holt: And we're going to put eslint, and we're going to put that inside of.
>> Brian Holt: Quotes here, and we're going to put it in everything inside of src**/*.js and jsx.
[00:04:43] Except we're not even gonna do jsx today in terms of pass, whatever, you can leave it like that. That's what my notes have. And then you can put in here --quiet, it's kind of noisy and quiet just kind of removes some of the noise from that.
>> Brian Holt: So, now, whenever we run ESLint, it's gonna run ESLint across our app.js file as well.
[00:05:12] But whatever js files we put in there, it will run.
>> Brian Holt: So, just to kinda prove my point to you, we're gonna say npm run lint.
>> Brian Holt: And looks like we have something. Which we should, right? It says react is not defined because it doesn't know where react is coming from.
[00:05:33]
>> Brian Holt: So, if we come into our app.js, it's gonna say, hey, what's react? I don't know what that is. So where did that come from? Which is what it should say, right? Because it doesn't know.
>> Brian Holt: So, we'll fix that here in a second, but now this is working.
[00:05:56] Now, again, I don't run that npm run lint command very often because now it's just inside of my editor, right? I can see that red underline, I can hover over and say, this is not defined, you need to fix this. So, I'm gonna show you how to do that as well.
[00:06:11] There's an extension for all major editors, but coming here to extensions, search for one called ESLint, and it's this one. Which has about almost 20 million downloads, so install that one as well and that should just work. So, once we have the ESLint 1 installed here, ESLint, like that, you should start seeing these things inside of your editor.
[00:06:39]
>> Brian Holt: So, if you don't like ESLint 1, you should, cuz I think it's a great tool. It's, again, one of my favorites. Cuz it really does help me to be a more productive developer, right? If I say things like const x = 5 and then never use it later, it's going to say, hey, no one used variables, right?
[00:06:57] You created this very well and you never use it, so why do you have it, right? And often that's a case of, let's say, I went down here and I accidentally set React.createElement(Ap) with one P, right? It's gonna say, I don't know what that is, right? So, it immediately highlights these errors like this, or if I put three Ps in there or something like that.
[00:07:18] It helps me catch a lot of really common dumb errors like that very quickly. As opposed to when I go to play into production and everything crashes because I put an extra P in there, not that I've ever done that. So, big fan. So, I like ESLint because it's very extensible.
[00:07:34] So you and I can both write custom ESLint rules. When I worked at Netflix, we had a ton of custom ESLint rules. But there are other tools, one of them would be JSHint which has been around forever. There's JSLint which Douglas Crockford created. But I'll just say that ESLint is very much the standard and it's the one I suggest that you use.
[00:07:59]
>> Brian Holt: It's actually been adopted by the JS Foundation, which used to be the jQuery Foundation and is now called the OpenJS Foundation, so.