Transcript from the "Using ESLint" Lesson
[00:00:00]
>> Okay, now we can proceed straight to linting. And that is going to be in our eslint RC. This is where we're going to we're going to install the typescript specific linting. So that's going to be yarn, add typescript-eslint recommended. Sorry. Two things, a typescript-eslint, it's the GitHub org and the NPM package scope.
[00:00:40] You only have to remember one thing, right? That is where all this stuff is located. And you're installing two things, parser so that eslint can understand typescript and the eslint plugin, so that it can provide you feedback about your typescript, need them both. And now we can go in here and let's see what our parser currently is.
[00:01:10] Okay, it looks like we may have already had that which is fine because the typescript-eslint parser can understand JavaScript too. And then we have to add this to the extends section, add some other stuff. And I'm gonna explain what some of the things that are already in here do.
[00:01:34] That is some great autocomplete there. I was not looking forward to typing that, I'm gonna add 'both of these. No, don't rob me of that now. Yes, okay, so, if you don't remember, like these are exactly the ones that we added to our small library before. The project here, just as before, we had a special eslint oriented typescript config, right?
[00:02:15] This is something that looks at both our tests and our source code. Same thing exists here. We already talked about that. I need to talk about that with you again. Because I think we have more interesting things to focus on here. And, One thing that is new because prettier is part of this setup here, one thing that is new is I have prettier typescript-eslint.
[00:02:50] So the the eslint plugin for prettier is important and you'll only realize how important it is if you have a situation where prettier and eslint are fighting against each other. So imagine that one of those tools wants to auto format your files one way and then eslint--fix wants to auto format your file another way.
[00:03:17] Or you could have things where like prettier does its thing and now eslint is unhappy and vice versa. So the whole point of this is to have eslint back off around anything that is prettier's job And they have a special typescript specific rule set, which can involve turning some things off, a rule set doesn't have to mean opting into things it can mean opting out.
[00:03:46] So it's important to have the right ones here. Consult the eslint plugin prettier README because it's a little bit nuanced how to set this up even the ordering of these things in this list is important. So save yourself some time and take a look at that README because it is more nuanced than one might expect.
[00:04:13] I kind of want to see how things run right now. Let's see if we're ready to go. So you can see where we're running our lint across many folders here and we got a bunch of warnings We have some errors. Where are those errors happening? They're happening in my server.
[00:04:33] Unsafe assignment, no var requires. So what I can do here, and where all that is happening it's in the little JSON server stuff that's happening here it's not typescript, it's just JavaScript. But that's what overrides are for, right? We can pass one or more objects into this overrides option.
[00:04:58] And we can enable or disable certain rules based on that. So here I can say rules, this one disabled, I think it's off. And then unsafe member access, unsafe assignment, like I just don't want to get too sucked into that. Cuz we really haven't touched that code. Let's just disable as many of these as we can.
[00:05:36] Comma, paste off. All right, let's see where we stand. So we had 48 problems, 39 errors. Let's see if we've dramatically improved our situation. Oops, I see a mistake. I'm just running it again because I corrected at a leading space here that would have possibly screwed things up.
[00:06:03] All right, we're down to eight errors. Let's see if there's just more stuff we need to disable for the server area it looks like it. So no var requires, that looks like another one. Oops. We need a comma. And it looks like, there's unbound method. So normally like I would want to take a swing at some of these but.
[00:06:40] Again, I'm resisting the temptation to sort of pile too much into one poll request, what would be a pull request. One more error. What's going on here? No unsafe return again in the server thing, Several folder. Still one error, this is probably because fixing one error resolved another, no, it's because I misspelled this typescript and I expect we'll get a pass here.
[00:07:38] Awesome. Okay, so now we're at a point where we got some typescript specific linting. We have a nice a reasonably strict compiler setting. We still have a lot of explicit entities. And so now even with the eslint, you could say, You did this, And now it's really going to light up.
[00:08:30] This is your incremental stuff where you go and you sorta chip away at the explicit entities that are sorta littered throughout this app at this point. No, it would show up with the linting job. I found out that I made a really silly mistake here. I was up here trying to figure out why I was unable to turn on this no-explicit-any rule.
[00:08:56] And it turns out again, like it's from my experience, I am likely to have made a mistake here. So I just looked elsewhere to see if in this file, I don't know, turn this rule off for all typescript files, it turns out, that's exactly what I did. So if I just simply, delete that actually, it's better if I delete this thing up here because this is a rule that applies across my whole codebase and I really just want it to apply to TypeScript files.
[00:09:27] And that's this section here, right? Everything in my source and tests folder with the TS or TSX extension. So here I can turn this back on, if you really like error. And let's see if I can run this now it should show a bunch more errors and I just want to show that it will surface them and then we can move on.
[00:09:51] I'm not gonna make you watch me play whack a mole. What if we just disable like just remove these? And it's not TSC of course it's eslint that we're trying to run. This is why it's even more important to keep separate, to know what role each element of your tool chain has.
[00:10:25] Because it's very easy to get confused about what is TSC validating, what's typescript validating, what's eslint checking for. Everything kind of gets mixed up. So now, of course, now that I am not contradicting myself in my own config file, here we've got a bunch of different things like invalid type any of a template literal expression, right?
[00:10:53] Unexpected type any, specify a different type. So now we can see this is where one by one we could peel off those rules and sort of ratchet up our safety as we go. I'm going to leave them disabled, but I just wanted you to see that it does in fact work and I'll leave this off actually, it does, in fact, work and the only problem I ran into there was That the file was getting complicated and I had a rule, globally enabled, and then disabled for an override the pointer to all of my typescript.
[00:11:31] So I turned it on and then off.