Use Prettier with TSLint without conflicts

Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 6 years ago

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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today