Intermediate React, v2 Migrating to TSLint

[00:00:00]
>> Brian Holt: The next thing I want to do here is I want to migrate this from ESLint to TSLint. Now, let's chat a second about TSLint. They plan to eventually get rid of TSLint and move everyone on to ESLint, both TypeScript and ESLint normal users, right? So why am I teaching you TSLint today?

[00:00:21] Because getting, they're still in the process of migrating and it's going to take like a while. I'm going to guess over a year for them to finally get everyone from TSlint on to ESlint. And so ESlint is just not ready for TypeScript users yet. So that's why I'm going to show you TSlint right now.

[00:00:38] Is because right now, if I'm starting a brand new project, I'm still going to use TSlint then migrate later to ESlint, because TSlint is just better at working with TypeScript than ESlint is. So let's go ahead and get that done. So we're gonna do,
>> Brian Holt: Maybe.
>> Brian Holt: We're gonna say pm, uninstall eslint babel-eslint eslint-config-prettier.

[00:01:22]
>> Brian Holt: eslint-plugin-import.
>> Brian Holt: eslint plugin-jsx-a11y. And eslint plugin-react. And eslint-plugin-react-hooks. Now, what you could do here is you could leave some of these and take away other of them, and kind of have both of them. Cuz ESlint does understand TypeScript, it just doesn't have very many TypeScript specific rules yet.

[00:01:57] For now, I'm just gonna show you how to take the ESlint out totally, and reimplement it with TSlint.
>> Brian Holt: Okay, so in other words, we're going to take all of our ESlint stuff out and we're going to replace it with TSlint stuff.
>> Brian Holt: Okay, we're going to say ESlint install, sorry, blah, eslint, npm install -D tslint tslint-react tslint-config-prettier.

[00:02:51]
>> Brian Holt: Okay. Go ahead and delete your eslint config doc here. So I'm gonna delete that, move it to trash. And then I'm going to make a new file here. Well, let's go ahead and change this first. Go to package.json. And change lint to be tslint --project.
>> Brian Holt: So this --project means, hey, there's a tsconfig, read everything from the tsconfig, which it's getting from TypeScript.

[00:03:33] Okay, now make a new file. Once you've gotten this lint one changed to tslint --project. New file, and we're gonna call it tslint.json.
>> Brian Holt: Okay, and we're going to do extends tslint:recommended, tslint-react, and tslint-config-prettier. So again, it doesn't matter that the order of these two, it just matters that the config-prettier is last.

[00:04:19] Because all this does is turn off things that prettier's already taken care of.
>> Brian Holt: And then we're gonna turn off a bunch of rules, because tslint recommended is really annoying if you don't turn off some of these rules. So ordered imports. This is one where you have to like alphabetize imports, and I am just not into that.

[00:04:40] Object sort, let's see object literal key sort.
>> Brian Holt: Object literal.
>> Brian Holt: Sort keys, that's one. This one, same thing. It forces you, if you make an object, you have to alphabetize all of the keys in it. And no, why would I ever wanna do that, right? So false, turn that off.

[00:05:06] No console, cuz we're using console in some places, so turn that off.
>> Brian Holt: jsx-no-lambda. This obviously would not work with hooks, [LAUGH] so you can turn that one off as well.
>> Brian Holt: And member ordering, that's another thing where you have to alphabetize things. And as you can see, you might be catching a theme here.

[00:05:30] I don't want to alphabetize anything. That one just doesn't make any sense to me.
>> Brian Holt: Okay, so that should get us started with tslint. The next thing that you probably wanna do, is you wanna come over here and you wanna search for tslint for an extension for VSCode.

[00:05:57] And obviously don't get the deprecated one, get the one that's made by Microsoft here and install that. And this will allow you to see all these lint errors directly in your editor.