Intermediate React Intermediate React

Switching from ESLint to TSLint

This course has been updated! We now recommend you take the Intermediate React, v4 course.

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

Replace ESLint modules and plugins with TSLint modules and plugins. Add a tslint configuration file and optionally disable rules that are unnecessary.

Get Unlimited Access Now

Transcript from the "Switching from ESLint to TSLint" Lesson

>> Brian Holt: So if you're gonna move from TypeScript or from JavaScript to TypeScript, you need some new tools as well. We've have been using ESLint. And ESLint is not sufficient to check the TypeScript. One, ESLint is checking for things that TypeScript is way better at doing, right? Because if it has type information, it can check for additional things.

[00:00:20] So there's that and the other thing's we want to check for type scripts with specific things. Like for example we don't want to be using the any type everywhere cause that's gonna lead to bigger problems. So we're gonna use a new tool called TSLint. So come over here to your application.

[00:00:37] I'm gonna say npm uninstall Eslint babel-eslint eslint-config-pretier eslint-plugin-import eslint-plugin-js x-a1y, and esLINT dash plugin dash react. Basically everything we were using for ESLINT we are going to take out now.
>> Brian Holt: Now, we're gonna install tslint, so we're gonna say npm install -D tslint tslint-react and tslint-config-prettier.
>> Brian Holt: Okay?

[00:01:43] Remove your eslint file because we're not going to use that garbage anymore. Just kidding. Eslint's great but we don't need it right now. Go into your package.json in your project and where it says eslint, all this stuff right here. We're going to change that to be tslint --project.

>> Brian Holt: And then make a new file here. And outside of the source directory, top level of your project, so the same level as package.json, call it tslint.json. In here, we're going to put a couple of things. Extends
>> Brian Holt: And we're gonna put tslint:recommended,
>> Brian Holt: Tslint-react. Sorry, that should not be a space, no space there.

[00:02:47] And tslint-config-prettier. So, tslint, this is just a bunch of rules that tslint recommends themselves. Tslint react is a bunch of rules specific for tslint and react together. And config prettier is doing what we were doing before with prettier, that it's just going to turn off all the format checking.

[00:03:08] Lastly, let's go turn off some other rules. Again, I'm not a big fan of turning off the rules. For the most part I'm just fine to let lint check for certain things, but there are some that I just could not stand. Ordered imports, I don't care if things are alphabetized ever, so false.

[00:03:26] Object-literal-sort-key. I don't know who thought this was a good idea, but it makes you put all your keys and objects in alphabetical order. It's just a little too, yeah, I'm not gonna do it. Interface-name, this one forces you to call interfaces with certain names,
>> Brian Holt: Not good anyway.

[00:03:49] Member-ordering, it's again, some sort of forcing things to be in certain orders. And no console because we do use console a couple of places in here so.
>> Brian Holt: So false there. So turn off a bunch of rules and you're welcome, cuz these are extremely annoying.
>> Brian Holt: So now that we have that, let's go make sure that if we say npm run lint that it works the way that we expect it to

>> Brian Holt: That was one thing I forgot to do. Package.js on here. I think you have to save project., did I miss that? Yeah, so sorry. Here in lint on line nine. Lint:tslint--project. You need to tell it where the project is. And the project is in the same directory that tslin exists in.

[00:04:56] So now if you say mpm run lint should work. We have no errors because we have one typescript file, it's only going to check typescript files. But since we already did that one correctly, we're golden on that.