This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "ESLint" Lesson
[00:00:00]
>> Brian Holt: So hopefully most of you were able to get this integrated into your editor. That'll be super helpful as we keep going. Throughout the course today, I will be pushing out branches so that you can kind of see where we are. And if you get lost or fall behind, this is a really easy way to catch up so you don't have to stay behind, right?
[00:00:18] So I just pushed up v3-1, right there, you can see that. And as we keep going I'll just keep incrementing that second number. So yeah, you're welcome to go fetch v3-1, check it out and then you can start going. So just to show you how that works if you're not super familiar with Git.
[00:00:41] You would say, making sure that you're let's key, git remote -vv. So making sure that your URL looks something like this for origin, that you're pointed at btholt/complete-intro-to-react, right? Then you're gonna say git fetch origin v3-1, right? And then you're gonna say git checkout v3-1 and that'll switch you on to the branch that has all that code.
[00:01:20]
>> Brian Holt: And again, you can do that throughout the day as I keep pushing branches.
>> Brian Holt: And for those of you that are watching right now, and they're here, if you fall behind, just ask me to push a branch, I'm happy to do that.
>> Brian Holt: Okay, so, let's go back to my notes here.
[00:01:41] Hopefully you got it integrated into your browser. The notes that I have there in my particular notes are for Sublime, so if you're not using Sublime these are not super useful to you. But hopefully the different editor integrations are pretty, hopefully their notes were useful for how to do it.
[00:02:03]
>> Brian Holt: There was a couple of people here that had issues with yarn global adds. I've had this issue as well and I do not remember how I solved it. It's typically a problem if you install node via MVM or N or one of those node version managers. So what I'm going to tell you to do right now to get around this issue, is just say npm install --global and just use that for all of your global installs and then later look up how to fix yarn global adds.
[00:02:34] So this is how you would do it for prettier. Yeah, for now, so that we can keep going, just do npm install --global.
>> Brian Holt: Great, any other questions before I move forward?
>> Mark: And also when you do git checkout v3-1 and if you're getting errors and you wanna just blow out your local changes, it can just add a -f.
[00:02:57]
>> Brian Holt: Yep.
>> Mark: And then, of course and.
>> Brian Holt: So git checkout-
>> Mark: Yeah, fetch there.
>> Brian Holt: Checkout v3-1 --force. Just, anytime you're using get and --force, just exercise extra caution. That's only the other thing I want to caution you. Okay, so we're good with prettier-
>> Mark: People are saying that in the x.html on that branch is actually not pointing to the ClientApp.jsx.
[00:03:32]
>> Brian Holt: It's not, yeah, I know I broke it, for sure. We're going to unbreak it.
>> Mark: All right.
>> Brian Holt: This is the workshop of breaking and unbreaking things.
>> Brian Holt: But that's astute, I would say the best way to code is have 300 people watching while you do it.
[00:03:51]
>> Brian Holt: Or 200, I think that's where we were at. Okay, so we're gonna move onto ESLint. We shouldn't have to mess with Prettier for the rest of the time, it's just gonna work magically. Sometimes, for example this is kind of something that's easy get thrown off. Let's say I have invalid JavaScript here, right?
[00:04:13] So say if I am I don't know, say I have this right, so I would expect this to fix with Prettier, right? And it's not if say it right now, because this is not valid JavaScript right now, so if you have syntax errors, Prettier can't fix everything, right?
[00:04:31] So, it's gonna depend on your various editors, how you know that that's happening. It's kinda hard to tell with Sublime, with sublime you actually have to open the console which I think is Ctrl+Tilde. Yeah, and so you can see here Prettier returned with 2 which means it didn't exit correctly.
[00:04:52] So you can see right here, syntax error, unexpected token. So, you have to make sure that you have valid JavaScript or else Prettier is not gonna work. So now as I fix it then it fixes everything and everything works well.
>> Brian Holt: So this will only be a problem temporarily because we're gonna put in ESLint and ESLint will first tell that it failed before Prettier fails.
[00:05:16] So,
>> Brian Holt: Okay, so ESLint.
>> Brian Holt: So Prettier is just gonna take care of stylistically things, right? It's not actually gonna handle code style, I guess what I'm trying to say there is. It's gonna handle syntax things, spaces, how many characters go in line? That's all that Prettier worries about, it doesn't actually worry about things like,
[00:05:45]
>> Brian Holt: Not using old JavaScript features that you don't wanna use, or enforcing ES6 rules or things like that. So we are gonna bring in other tool called ESLint to kind of help out with some of those rule. And again, previously in this class, we had used something called standard, this is driven my desire to never write semicolons.
[00:06:03] And in fact, I got a lot of blow-back for not continuing to use standard, but the reason being is that the Airbnb ESLint configurals have really matured to the point where I feel like I don't have a good reason not to use them. Because it catches so many bugs and it enforces really good code style.
[00:06:22] So, today we're gonna be using the AirbnB config together with Prettier and I think that's a really winning combination. So the first thing we're gonna do now is we're going to create a file called .ESLint,
>> Brian Holt: RC.json, and we are going to put this in the root directory of our project.
[00:06:52]
>> Brian Holt: So just use that, so this is going to be the config for our ESLint. And we're gonna put some configurals in here. So the first one is extends,
>> Brian Holt: And the order here is important, so make sure you put these in this order. The first thing you wanna put is airbnb, the second one is prettier, and the third one is prettier/react.
[00:07:27] Now, why are we pulling in Prettier? Well, the reason why we're pulling in Prettier is that Prettier actually invalidates some of the things that Airbnb check for, right? Airbnb will check for things like too many characters on a line, it's gonna check for things like semi-colons, it is gonna check for thing like white spaces.
[00:07:45] This is not actually useful for Airbnb like the ESLint to check for anymore. So these prettier and prettier/react actually disable a bunch of rules just to make sure that Prettier can run without ESLint yelling about it, does that make sense, right? It's just getting rid of a lot of the noise.
[00:08:05]
>> Brian Holt: Okay, the next thing we're going to put is plugins.
>> Brian Holt: And we're just gonna have one which is gonna be the prettier plugin, so that we can run those rules.
>> Brian Holt: And then we're gonna put some parserOptions.
>> Brian Holt: And ecmaVersion,
>> Brian Holt: I have 2016 on here, I think that was the latest one I was working when I wrote this.
[00:08:37] It might be later now, but as long s you're past 2015 you should be golden. Source type, so we're gonna be using ES6 modules today, that particular way of writing JavaScript. So we're not going to use CommonJS in other words, so that's what that means.
>> Brian Holt: And then ecmaFeatures, we want to tell it that it needs to pass JSX, which is true, it does.
[00:09:16] And then the last thing is env, which is just telling it what environment, what global variables to not fail you on. So es6, so this will tell it not to fail on things like symbol for example, right? Symbol is only available in ES6. Browser, this is telling it not to fail in things like Window and document and things like that.
[00:09:49]
>> Brian Holt: And lastly, node, so this is telling it to not fail in other things like process.env, right, which is only available in Node.
>> Brian Holt: Okay, and this should be our Airbnb config, this should work for a while, we'll have to modify it later to accommodate more features as we add them.
[00:10:11] But this should be enough for now.
>> Brian Holt: So, now we can come back here to our command line, I have ESLint installed here, but if you don't then feel free to do yarn global add or npm install -- global eslint.
>> Brian Holt: And I'm going to say eslint **/*., either js or jsx.
[00:10:53]
>> Brian Holt: And I want it to be quiet.
>> Brian Holt: So this is gonna run the rules we just barely brought in and is running on ClientApp.jsx, and it has these two violations. It says ReactDOM is not defined, and React is not defined, right? Which would make sense if we go back to our ClientApp.jsx, we're referring to React, and,
[00:11:26]
>> Brian Holt: ReactDOM down here. And they're being brought in via those script tags, but we actually haven't,
>> Brian Holt: We haven't set those apart as global variables.
>> Speaker 3: Did you install ESLint?
>> Brian Holt: I did, so I did npm install --global eslint
>> Speaker 3: Okay, yeah.
>> Speaker 4: I think we missed that step.
[00:11:53]
>> Speaker 3: We missed that step.
>> Brian Holt: Okay.
>> Brian Holt: And, yeah go ahead Mark.
>> Mark: Doug's asking if you can elaborate on the difference between Prettier, ESLint, and Airbnb?
>> Brian Holt: Sure, so Prettier is a formatter, so all it does it takes your code and it rearranges it into a nicely formatted piece of code, right?
[00:12:26] It doesn't do any checking for style, it doesn't do any checking for, like for example we have, if we run that again. This is what ESLint's checking for, it's checking for more things like did you use something that was undefined? Are you calling functions that don't exist, right?
[00:12:46] It's gonna check for more of those sorts of things.
>> Brian Holt: Whereas Prettier is just taking one blob of text, reformatting it and then printing it back out. Doesn't change anything else about your code. Airbnb, so it's actually eslint-config-airbnb is what it's called.
>> Brian Holt: So this is a specific configuration of ESLint, right, that's all it is.
[00:13:22]
>> Brian Holt: So yeah, that's the difference, one formats, one checks for style, and one is just the configuration of ESLint. It's a good question.
>> Brian Holt: Do you have a question?
>> Speaker 5: I'm getting an error ESLint.
>> Brian Holt: What error are you getting?
>> Speaker 5: Argument list too long.
>> Speaker 6: So I'm having one that says it's looking for ESLint, hyphen plugin, hyphen prettier, when I try to run the ESLint quite.
[00:13:55]
>> Brian Holt: Yeah, it should be in here. I guess more package.json.
>> Brian Holt: Eslint-config-prettier right there.
>> Speaker 6: And I'll try reinstalling it.
>> Speaker 7: It was plugin-prettier.
>> Brian Holt: Did you miss the plugin-prettier part?
>> Speaker 7: Potentially.
>> Brian Holt: So what we're gonna do now is we're gonna take this eslint part right here, this command that we just ran.
[00:14:43]
>> Brian Holt: I want you to copy that. Now, [COUGH] we'll eventually fix the errors that are coming out of it, like the arguments list is too long and all that. Cuz we're gonna blow away all the code that we wrote anyway and write new code. So I'm not super interested in fixing it, but we're going to put the lint in here as well.
[00:15:07] So lint and we're going to do that.
>> Brian Holt: So again, this is if your companions don't necessarily want to,
>> Brian Holt: Integrate ESLint into their editor and all that kinda stuff. You can put this in and it can also run continuous integration. So if for example you fail your ESLint pass, it would fail the build and then they have to go back and fix it, right?
[00:15:39]
>> Brian Holt: So now we've done that which I just put into this line right here. Then I'm gonna say,
>> Brian Holt: yarn lint and it should work. Reason why we did quiet, just so you know, is we want it to only show errors and not warnings.
>> Brian Holt: Again, that's typically for a continuous integration.
[00:16:07] You don't wanna fail your build just for warnings, you wanna fail it just on error.