DEV Community

loading...
Cover image for Use Prettier with TSLint and relax

Use Prettier with TSLint and relax

alexjoverm profile image Alex Jover Originally published at alexjoverm.github.io ・2 min read

Wait, a video explaining "Use Prettier with TSLint"? Yes! Check it out on Egghead.io!

Prettier support for TypeScript just landed. Let's see how tslint-config-prettier helps to seamlessly combine it with TSLint.

Recently, @vjeux, one of the authors of Prettier, announced TypeScript support in the following tweet:

That's pretty amazing! I've just went and tried it out. I was so impressed by how magic the experience was that I've completely removed TSLint from TypeScript library starter.

The problem

Prettier and TSLint collide, since they both take care of formatting. For the following code, TSLint will give us the error [tslint] Multiple spaces found before '{'. (no-multi-spaces):

class DummyClass      {
  food = 'sandwitch'
}
Enter fullscreen mode Exit fullscreen mode

But, when we run Prettier, the code is automatically formatted:

class DummyClass {
  food = 'sandwitch'
}
Enter fullscreen mode Exit fullscreen mode

This makes the workflow pretty useless, since we're getting linting errors that Prettier will solve.

The solution

It's very simple:

Let Prettier take care of code formatting, and TSLint of the rest

That's why I've created tslint-config-prettier. It disables all TSLint formatting related rules, as well as for tslint-react and tslint-eslint-rules.

The installation is straightforward, once you setup TSLint and Prettier:

npm i -D tslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Add it to the end of your tslint.json file:

{
  "extends": [
    "tslint:latest",
    "tslint-config-prettier"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Now we can use Prettier and TSLint without any problem!

I must thank @vjeux for pointing me out to this solution and @JBlack for the time to review tslint-config-prettier.

If you liked it, please go and share it! You can follow me on this blog or on twitter as @alexjoverm. Any questions? Shoot!

Originally published on Alex Jover blog

Discussion (2)

pic
Editor guide
Collapse
gyandeeps profile image
Gyandeep Singh • Edited

Great post. :)
I started things along the prettier tangent and then eventually thinking about why I would need TSLint.

Collapse
jess profile image
Jess Lee (she/her)

Thanks! This is really helpful.