Check out a free preview of the full Intermediate React, v4 course:
The "TypeScript & ESLint" Lesson is part of the full, Intermediate React, v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian configures ESLint to work with TypeScript. This will force the codebase to adhere to a common coding style. Once everything is configured, the lint command can be run to view all the errors.

Get Unlimited Access Now

Transcript from the "TypeScript & ESLint" Lesson

[00:00:00]
>> We do have a bit of a problem at the moment that our ESLint doesn't know how to check TypeScript. And obviously, we want the ESLint to check TypeScript. We used to use a project called TSLint. TSLint is now deprecated. And that team just basically said, you know what, everyone should just be on ESLint.

[00:00:20] So they actually augmented ESLint with the ability to check things based on type in addition to all the other things I was doing before, which was the ability that TSLint had that ESLint lacked. It's a bit of ceremony to get it all set up, but I'll show you how to do it right really quick.

[00:00:38] So if we go in to package.json, let's make sure that we have everything here. Yeah, this is all good. So, we are going to open our code editor. So we're gonna do npm install -D eslint-import-resolver-typescript@2.4.0, by the way, you can totally copy this out of my notes, you do not have to follow along with me, @typescript- eslint.

[00:01:14] This is the name of the project that does the bridging between the two, by the way. /eslint-plugin@4.16.1@typescript, -eslint/parser@4.16.1. Okay. I probably misspelled something? Eslint-import-resolver-typescript@2.4, eslint this. Let me just grab it out of my notes, rather than make you sit here and debug it with me. So we're down here in TypeScript and ESLint and I want you to grab this line right there.

[00:02:36] And still has a problem here, could not resolve dependency eslint. I have eslint@ version 8. So it wants to be at 7. All right, well, let's just take the version off of these. I might have you install too old of a version here. The versions that I want to install for this are, And actually I can just kinda start that piece again with the correct versions.

[00:03:12] So, and then I'll fix this in my notes later. I went into an npm, oops, npm install -D eslint-import-resolver-typescript@, eslint import, I have 2.5.0, then we are gonna do, let's see here, @typescript- eslint/eslint-plugin@. And this one is supposed to be version 5.13.0, and then we're gonna do @typescript-eslint/parser, and that's also at version 5.13.0.

[00:04:20] Okay, and that should give you all the tools that you'll need to be able to run ESLlint on your TypeScript project. Okay, come back to your package.json. And then here on your lint function, we're just gonna add ts and tsx in here as well, cuz we wanna run now eslint on those projects as well.

[00:04:48] Okay, Let's go fix our eslintrc.json to make this run typescript stuff. So the next thing to run in here, just again, make sure this is above prettier. The order of these does not matter in the extends except that prettier must be last. So we're gonna do plugin:@typescript-eslint/recommended. Okay.

[00:05:25] We are gonna turn off one rule here, is @typescript-eslint/no-empty-functions. We use in one place in our application and I think it's fine, so we're just gonna turn that off. Okay, here instead of plugins, this one doesn't matter. You can put them in any order, we're just gonna add @typescript-eslint.

[00:05:58] This will augment the ability of of ESLint to check TypeScript specific rules. Okay, here in the settings array down here underneath react, we're gonna put import/parsers. We have to tell it how to import TypeScript files, otherwise it would just ignore TypeScript files. Or rather it wouldn't ignore them, but you're telling it that you have to use a different parser for it to work.

[00:06:33] So typescript-eslint/parser. And you're saying use this parser on anything that ends in, as you may guess, .ts or .tsx. Otherwise it's gonna use the normal JavaScript ESLint parser. Okay, one more thing underneath here, we're gonna put import/resolver, you have to tell it that on TypeScript files to always try the types.

[00:07:23] Okay. It's a bit of, again, a bit of ceremony to get this all set up. It's better than it used to be. It used to be a hot mess to set all this up. And you might say this is just a medium mess, and I am much happier with the medium mess than hot mess.

[00:07:39] Life advice from Brian again. Okay, so what happens now if you say npm run lint? It works. Let's enforce type checking. So under here, under extends here, we're gonna add, Plugin:@typescript, -eslint/recommended-, requiring-type-checking. Okay, so this worked and it had no problems and everything was fine. Now I think if we run npm run lint, it's going to be extremely upset at us.

[00:08:52] On this one, you have to give it the project, that's right. This one, I think you just have to do here. All right, we need to add one more thing. And that is here in the parser options, you have to tell it where your TypeScript configures. So you can just say here, "project": and then you just tell it, you can have multiple project files, we obviously only have one, it's just we type ./tsconfig.json.

[00:09:36] And then put a comma there. Now ESLint knows where your project configuration is. So now if you say npm run lint, we'll get a whole slew of TypeScript errors that if we were not doing all our migration all at once, you would not do this. But because we gonna be doing this all at once, this makes sense because now we can go piece by piece.

[00:09:59] And by the end of this, we'll have no TypeScript errors, no ESLint errors. And yeah, and then we can keep going from there. So, yeah, one thing I wanted to show you, if you go over here and you click on this link. You can see here that's actually adding a bunch of new TypeScript specific rules in terms of how to write good TypeScript.

[00:10:21] And additional cool typing checking kind of things that ESLint would not be capable of, but now TSLint, sorry, ESLint is capable of checking in conjunction with TypeScript. That's all here. So I'll leave you to go through and check all those, everything here that has a wrench next to it means it can auto fix it, which is pretty cool, so, a bunch of really cool stuff.