Complete Intro to React, v7 ESLint

Transcript from the "ESLint" Lesson

[00:00:00]
>> So prettier people get confused about, what's the overlap between prettier and eslint? When do I use one, and when do I not use one? And the first thing that I'll say is, there is overlap. There are some things that they both I do and in general where they overlap you want prettier to do it cuz prettier is better and faster at it.

[00:00:19] So you wanna like the mechanical syntactical kind of thing of like how much whitespace, where do I put commas? Where do I put spaces? All of that kind of syntactical mechanical kind of thing you wanna prettier to take care of. Where you want to enforce like code opinions and like structures of code and like what the code is actually doing.

[00:00:41] That's what you want ESLint to take care of right? So pretty well take care of like, where do I put a hard return? Where do I put a space? ESLint is going to take care of like, Am I doing accessibility correctly? Am I using old API's? Right, prettier doesn't take care of any does not look at the code it doesn't make any assertion that it's correct right it just says like I'm making this space to uniformly.

[00:01:05] Es linters saying things more like I don't want you to use this API.If you're using this thing incorrectly, you declared a variable that you never used, like it's introspection your code from that direction. That make sense? Okay and the reason I say that there is some overlap, you can have ESLint to tell you that you're spacing your code incorrectly, but just let prettier take care of that.

[00:01:29] So let's go install ESLint then. The first thing I would tell you is for the least for the rest of the course here I'm going to have you install specific versions of things. So I'm going to say like NPM install ESLint at 8.8.0 you might ask why don't I just want the latest thing?

[00:01:48] In general yes, you do want the latest thing. And in particular, if I'm working on something at home, you'll always want the latest patch at the very least, right? And hopefully the latest miner and so I have people installs very specific versions of things here. So I can guarantee those versions all work together, right?

[00:02:06] Cuz it never leaves stuff, drifts, and falls apart and things like that. So for the sake of this course, please follow along with the versions that I'm installing. And then feel free to go try and install the latest version and see what breaks, right? In general, I've been teaching these tools for years and the drift here isn't substantial, except on React Router.

[00:02:28] We'll get into that later. So all right, we're gonna say npm install -D and we're gonna do eslint- or sorry @8.8.0. Also feel free to just copy these from the course notes if you don't feel like typing everything out, eslint-config-prettier@8.3.0. Okay you can also shorten install to i by the way if you're unaware of that I'm sure I will eventually start doing that because the fingers get tired.

[00:03:17] It's the dumbest thing I've ever said. [LAUGH] That's a pretty low bar to anyway. So install those two things. You should see here that you got eslint and eslint config prettier. You'll see this little circumflex, whatever you want to call those ,what are they called Flex is the name of the accent I don't know what these are called,.

[00:03:41] Anyway the whatever shift six gives you on an American keyboard, that just means install the latest patch of this so like if 8.3.0 and I just ran like NPM install on this just cold with no node modules. It's like 8.3 .1 was available, it would grab that, right?

[00:03:59] That's what this means. If I take this out and save it, which that's how it looks in the course directory. It means install exactly this don't install anything else if this fails and fail it, all right. This just means give me the latest patch, which is 99 times what you want but just be aware of the case.

[00:04:18] When you're going out to production, you wanna actually install exactly what's in your package JSON because that's what got tested, right? Which is what package locks are for. Like, again, we're not gonna talk too much about that but that's in general what those are. Yeah?
>> Have you ever ran into conflicts where ESLint tells you one thing and then prettier another?

[00:04:40]
>> Yes. So I definitely have run into those kinds of conflicts before I'm going to show you how to make sure that that never happens. And in those cases, go with what prettier says over ESLint, so you can leave the circumflex in, that's fine. I'm just telling you that's why it is that way inside of the project.

[00:05:03] There's other things in here. Like I think you can put like things like latest. There's a bunch of things that you can do the magic you can do inside of your package, JSON the So that way, we're not gonna worry about it. So I want you to create a file now called new file here root of the directory not inside of the source directory.eslintrc.json.

[00:05:25] The reason why you have to put JSON here at the end is there's a bunch of ways to configure your site. You can do it with like an actual .JavaScript files, you can actually like run code. I think you can do with YAML. I don't know why you'd wanna do that, but you could.

[00:05:43] Let's do JSON cuz that's pretty easy. Okay, so make an object. We gotta configure this one a little bit. Okay, So the first thing went to put his extends, this is gonna be an array and we're gonna give it a eslint: recommended and then prettier. So in general, the extends order is not going to be very important to us, except I think I'm gonna dwell on this for a second to make sure that we all get this prettier must come last Prettier must come last pretty much come last pretty much come last.

[00:06:32] Okay, we got it. [LAUGH] I just say that because someone's not going to do it and it'd be like why is this so because prettier came last. So this prettier config and if you remember we installed it here it refers to this eslint config prettier. That's what the extents here means.

[00:06:47] The only thing this config does is it shuts off other configs, it doesn't add any new rules to our ESLint, all it does is it shuts off rules from other conflicts. Which basically says hey, don't check for whitespace, don't check for commas, don't check for semicolons, I got all that.

[00:07:06] Okay, so that's why pretty has come last. ESLint recommended is just very solid, unopinionated just objectively, right and wrong kind of rules, right? So for example, you should not just have a variable that you declare and then never use, right? That's just a bad idea and so the ESLint tool, recommended, catches those kind of problems.

[00:07:30] They're just things that you always wanna do but no one's gonna argue with you in a meeting about it. I don't know, I've had some pretty opinionated coworkers and no one's yet has gotten mad at this one, right. So that's what ESLint recommended is and that's all we're gonna do for this class.

[00:07:48] I've been all over the map in terms of all the configs I've had for this class I taught everything from standard to the to the Airbnb ones and boast standard has some strong opinions on it. But Airbnb is draconian in terms of how much styling stuff that it enforces right it's things have to be like alphabetized and things that I hated it.

[00:08:11] So I went around for this roller coaster of opinions on the matter of, I want all of my code to look like it was written by the same person. I'm sure you've all heard that before, right? And now I think that's a very bad idea because right now we're getting into Brian's philosophy of developer tools.

[00:08:27] My philosophy of developer tools is developers are very smart and they have some idea in their brain that they're trying to translate from amorphous concept to code on a page, right? Every time that my dev tool yells at them, it's like you're doing it the wrong way. We're introducing artificial friction to the process in terms of like, they had an idea.

[00:08:45] They were translating into code and now we're making them stop to do something else, right? That makes them go slower and probably maybe write a little bit worse code because not as a pure expression of what they were trying to do. So be very deliberate in terms of what kind of friction you introduce into that process.

[00:09:00] So for example if they're going to make accessibility bugs yes we should stop them to make them slow down and go fix those accessibility bugs right. If they're going to do some that's going to cause them bugs later it's better than to fix it now than to try and debug it later and find it out.

[00:09:12] But if I'm telling them to alphabetize something, I can go get lost because that's just not a good idea, right? It's just not helpful, no one cares that it's alphabetized, right, so let's not make developers slow down for that. Okay, rant over, I'm sorry, I feel good about myself though so anyway, that's why we're doing the like the very bare minimum set of rules here is because that.

[00:09:35] We're trying to introduce the bare minimum of like helping people be productive without slowing them down too much. So plugins will do some plugins later But for now, it will do that'll just be an empty array. Plugins is like extending next the what ESLint can do and read and we'll have to go fix this here in a little bit but for now we don't have anything we need parser options you have to tell it some.

[00:10:03] So like for example what version of the features we'll do that here in a sec. We want ecma version and we're going to be doing 2022 which is just saying, like, this is the ES6 that we're using right the version of JavaScript. We're saying we're using the most latest version of JavaScript.

[00:10:30] Source Type we're gonna be writing module. You can write common Jas here ESlint does that just fine. JSX ECMA features is basically like what extensions of it we're gonna be writing we're gonna be writing jsx so you can put true there inside of ecmaFeatures. Okay underneath that we have to tell it what environment we're working in.

[00:10:56] So es6 true this is like, allow things like import for example, right? Like those kinds of features are reserved words allow things like map and weak map and weak set and things like that. We're going to be working in the browser. So this is like allow things like document allow things like window, allow things like fetch.

[00:11:20] And then we'll be working in node this is allow things like process and other kind of global variables specific to nodeJS Okay, this is like the most bare bones projects that you would be working with for React kinda set up here. Anyone's gonna come in here and how many you standard JS, so help me God was bad you just kidding.

[00:11:51] I have no power to do that. So let's try it. We're gonna say mpxeslintsourceapp.js and you can see here it's got a bunch of errors. No. So, if you go look at our app.js you can see here and now my editor here is very upset at all my react calls, why?

[00:12:21] We can see here the no-undef rule here is happening and if I mouse over this as a React is not defined. Doesn't know where React is coming from. React is coming from here right from the script tag so it actually is correct but ESLint is like hey you're calling to something and I don't know what it is so I'm gonna flag an error until you fix it.

[00:12:41] We will fix it here in a second, I'm just gonna show you if that's the case, you do need to do it that way. You can actually put a special comment up here at the top that says global React and ReactDOM. And now if I save this and if I run this again notice that it's fine it's like okay no I figured it out but we're not going to do that you can delete that.

[00:13:04] This is the kind of things like I was telling like it catches like these things like, you should not be trying to access variables that don't exist, right? That's the kind of rules that ESLint recommended has inside of it. So some of you might be saying, well, how do I see that red underline there?

[00:13:18] I don't see that yet you have to install the VS code extension for it which is this one. It's the official Microsoft one is called ESLint. It's kind of finicky sometimes and it throws out some weird errors. So if you see that, in general I just reload it and or just ignore them, but that's what it is.

[00:13:39] That's what causes it. So don't worry about the errors for the moment we will fix them here in a bit. It's not worth fixing right now. Okay, I want you to go to your package.json and I want you to leave or create another entry here. This one is going to be called lint and we're just going to say eslint, you can even copy and paste this little snippet right here because we want the same thing.

[00:14:12] And then I always put --quiet because it's kind of noisy and quiet we'll just keep it to like the bare minimum stuff that's broken. Another reason that I always put these things in here when I put in prettier eslint is now I can run all this stuff in, like GitHub actions right or CI/CD kind of situations.

[00:14:39] Because if ESLint find something, it'll fail and prettier has an option I gotta remember MPX. Prettier --help that's check, I think is what it might be called. There's a thing that you can pass with the bit that's basically like, I'm checking I'm actually trying to format. Yeah, it is --check.

[00:15:01] So, then you could put in something we'll just do right now because why not? Format:check so instead of dash dash right you put --check this is what I would run in like GitHub actions and this would fail if it modified anything, right? It's like you found something that was done so therefore someone did not run prettier before they check this in therefore I failed or built.

[00:15:28] It's kinda like being defensive with your code, right? Because you want everyone to run prettier before it gets checked in. One less thing with lint like you can see here this actually if you go to problems here in VS code it'll show you all the ESLint codes there.

[00:15:42] Are things that are broken at the moment just nice. One thing I was gonna show you with ESLint is you can run it so if I do NPM run was it lint.You can put dash, dash, so this is an NPM thing. If I want to pass things on to the command that I'm running so I want to pass it into ESLint and not to NPM you put the dash, dash and then anything after that.

[00:16:07] The dash dash gets passed into ESLint and not to NPM. Otherwise if I do like -- fix here it'll think NPM is like I don't have a fix command, right? You want to pass it into ESLint that's the dash dash does. That's why a dash dash space dash dash fix.

[00:16:27] Sometimes ESLint can just automatically fix things for you. And I'm struggling to think of one off the top of my head, like it could fix white space for you if you allowed it to. And if you saying like, hey, if you have something that can just fix this for me, do it.

[00:16:42] And that's kind of a nice feature is sometimes, then the ascent can just solve problems for. But it's only like half of the problems can consult for a bunch of it just says like this is broken I don't know how to fix it to your problem. You can do --debug if you're if you need more information at ESLint you can see here it's a very verbose of what it'll throw out at you, but that can be useful sometimes.

[00:17:09] Alternatives to ESLint there's JSLint which never use please never use. It's out of date and it's opinionated and just not a good way don't even feel bad saying that just don't use it. And then there's JSHint, which is much more forgivable, it's very opinionated but they're not bad opinions.

[00:17:30] It's just not configurable. Whereas something like code styles, you need some configurability to it as someone that does not like configuring things. This one actually is very useful to be configurable. Because this filter project is very different than a React project for example. And those just need wildly different rules ESLint can cover both of those JSHint covers no neither of them.

[00:17:55] But that's it ESLint has far and above taken over the ecosystem. It's a open JS Foundation project. Now, it's that popular, it's an essential part of the ecosystem. So just use the ESLint. All right, cool. Any questions about linting, formatting, eslint, anything like that?
>> That TSLint is deprecated, right?

[00:18:20]
>> Correct. So TSLint is for TypeScript, intermediate react we actually go and how to set up ESLint for TypeScript. So check out intermediate react v4 for that.