Use Prettier with TSLint without conflicts

[00:00] Here, I have empty TypeScript with prettier configured to run when I save it. I'm going to write some code with JSON intentionally badly formatted. A couple of variables, and now when I save it, you see that prettier is correctly formatting it.

[00:17] Now, we want to use prettier with TSLint. For that, let's install TypeScript and TSLint, and create a TSLint JSON file. In there, we are going to create an extends key, and use the TSLint latest preset that comes built-in with TSLint.

[00:37] Now, if we go back to example.ts, we see that TSLint is already complaining about formatting rules, like can't be the end of file, missing semicolon, or the use of single quote. These are formatting rules, and prettier already takes care of it.

[00:55] We will save this. Prettier formats it, and we don't see the errors anymore. Although we don't want these errors, we still want TSLint to take care of non-formatting errors. That can be no use of var or no use of console.

[01:13] We can fix this by using tslint-config-prettier. Let's go and install it. tslint-config-prettier disables all formatting rules of TSLint. Now, let's go to tslint.json and add it to the end. That way, that will override TSLint latest rules.

[01:33] Let's go back to the TypeScript file. Now, we still start messing around with indentation, the semicolons, the quotes, and all that stuff. We see that TSLint is not triggering any errors for the formatting rules. What tslint-config-prettier is doing is making prettier take care of formatting, and let the rest to TSLint.