This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use Prettier with TSLint without conflicts

    Alex Jover MoralesAlex Jover Morales

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss