Setup TypeScript ESLint

[00:00:00]
>> We already have an ESLint config for this project, it's here, eslintrc.json. And it's kinda long, right? This is almost 40 lines of configuration, but it's a very bare bones set of ESLint. It's very much just like, make sure that all the plugins work, make sure that I'm following some basic React rules, and I'm not doing basic JavaScript errors.

[00:00:23]
That's essentially what this ESLint config does. There's a project called ESLint TypeScript, which will actually use types for your ESLint checking so you can actually get an additional level of better linting. There used to be a project called TSLint. But TSLint just migrated all that stuff to ESLint TypeScript.

[00:00:42]
So now there's one stack, which is ESLint and TypeScript together to check your project, which is great. So I need you all to go install npm, i -D. And I would recommend that you just copy this cuz it's kind of long. eslint-import-resolver-typescript, that's one of them, @3.5.1 @typescript-eslint/eslint-plugin@5.40.1 and @typescript-eslint/parser@, the same, 5.40.1.

[00:01:37]
Okay, let those run for a second. Again, that is just in my notes, so you can just copy and paste that directly. This is going to give ESLint the ability to resolve TS files, that's good. It's going to give us the core project of using TypeScript inside of your ESLint, that's good.

[00:02:00]
And then the parser, we needed some additional parsing logic because ESLint by itself cannot understand the colons and the types and things like that. So we needed another parser, which is what that parser is for. In your package.json here, the one thing you need to change here is for your format and for your lint.

[00:02:22]
Just make sure you add ts and tsx here so that you're typing your TypeScript and your TSX files for both format and lint. You want preview to do it too. Pretty already does TypeScript out of the box, no changes necessary. Okay, and then come back here to your, and now my tsconfig is happy, I don't know what happened.

[00:02:46]
But suddenly, I think mercury was in retrograde and now it's come around, and now my Aquarius is aligned with Saturn, it's fine. So now, TypeScript is happy. That was a joke, if anyone thinks that I'm serious. [LAUGH] Okay, maybe I'm not, eslintrc.json. Here, just add another extends here, we need a plugin:@typescript-eslint/recommended.

[00:03:23]
I don't know why I always do this, I sort them based on length of the string, but I don't know why this like some ASMR effect here that this makes me happy that it's a nice little staircase. If I put it there, I hope all of you would be upset, and it's like, no, Brian, change it.

[00:03:39]
Okay, sorry, I've been teaching towards this class, I'm starting to get delirious, and it's fine. Okay, so we're gonna add in here a rule under, this is just one that I don't wanna go fix. We're gonna just gonna turn it off, typeScript-eslint. I have some empty functions in here, so we're just gonna turn that off, no-empty-function.

[00:04:03]
Typically, I wouldn't turn that off, but in this particular project, we don't need it, so that's fine. Okay, here in plugins, we're gonna add @typescript-eslint, like that. That's good. We're gonna replace the parser, Do we have a parser? No, I don't think, we just need to add one.

[00:04:31]
Okay, parser, and we're gonna put inside of that @typescript-eslint/parser. Again, this is gonna allow our ESLint to actually be able to read TypeScript, which is good. parserOptions, we need to add a project in here, you have to point ESLint TypeScript to your TS config file. So you can just say, ./ts.config.json.

[00:05:07]
Otherwise, it doesn't know how to render TypeScript correctly. You'd wish that we just look for tsconfig automatically, it's always called that, but not the case. Settings, okay, we have react, detect, that's good. The import/parsers, so import/, parsers. This is gonna be @typescript if you tell which files to use the eslint-parser for, I guess.

[00:05:48]
This was a lot of guessing and checking if we're being super honest. This took me a while to figure out how to get this exactly to work. .ts, Yeah, and you have to use double quotes, ".ts" and ".tsx". And then import/resolver, you wanna get rid of the node stuff.

[00:06:12]
So delete that, and you're gonna put "typescript", and you're gonna do "alwaysTryTypes" to be true. Okay, This was a lot to get, and it's like the level of nesting is important here. So, I'm not going to fault you if you just pop over to the project and grab the completed eslintrc.json.

[00:06:43]
Not really a ton to learn here, setting up ESLint is, again, worrying if Mercury's in retrograde or not. Okay, so now we have this. I think, hopefully, we should be able to run npm run lint. And cool, we are not getting anything out of the MIT, which is I think what we are expecting, which is good Yeah, so actually, in my notes here at the bottom, I have it completed just to show you down here at the bottom.

[00:07:24]
If you just wanna copy and paste this, you will get no fault from me. This is the entire thing. We are gonna add one more here. I'll tell you right now, what I have up here, perfectly acceptable. If you wanna run with this, this is great. You can get a little bit more aggressive with your linting if you want to, and we're going to since this was not that much lift for us.

[00:07:49]
But if you're on a big project, this could be a big lift for you. typescript-eslint/recommended-requiring-type-checking. This is basically gonna say, everything has to be type checked, we are not going to allow you to do anything that isn't run through the TypeScript parser or the TypeScript project. So again, this is gonna be a bit more aggressive.

[00:08:20]
My suggest is maybe start or add this one maybe at the end once you've finished your TypeScript migration, and then it's gonna enforce that people continue to keep your TypeScripts up to date. All right, so let's see how that does now. You can see here, it adds a ton of errors because now it's enforcing all of our JavaScript to say, hey, this is untyped, you have a lot of any types in here.

[00:08:44]
So this gets pretty aggressive pretty quickly.