Use Prettier with TSLint without conflicts
Prettier is an amazing code formatting tool that has support for TypeScript. With Prettier, you don't need care about code formatting rules. TSLint is a static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.
This lesson shows you how can use tslint-config-prettier in order to combine both seamlessly.
[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.