How To Use ESLint and Prettier Together With TypeScript

This article mainly focuses on the configuration in VSCode.

It would be nice, to begin with, a nice quotation: “There is sometimes an incorrect assumption that the parser itself is what does everything necessary to facilitate the use of ESLint with TypeScript. In actuality, it is the combination of the parser and one or more plugins which allow you to maximize your usage of ESLint with TypeScript.

If you decided to make your life easier you may want to use Prettier for your project. Or some of you do not like the way Prettier formats and want to work with ESLint. Which one should you choose? Prettier? ESLint? or both?

As you can understand from their own description Prettier is “an opinionated code formatter”, which is stubborn in some formatting ways. For instance, some hate the way Prettier puts the closing tag in a new line in HTML. And they solved this issue for React but still an ongoing issue for Angular. You can follow the discussions from this link if you want: https://github.com/prettier/prettier/issues/5377

The way Prettier handles closing tags in HTML in Angular

And this depends on people’s preferences. For me, it is better to see the closing tag on a new line. It makes easier to distinguish attributes.

However, regarding TypeScript the problem to be addressed is a bit different. If you have long and wide functions Prettier may format your function in a way you don’t like. Or let’s say you want to put a chaining function in a new line ( like .subscribe() etc.) for readability, but if Prettier fits the line length it will put it in the same line. Like so:

Before Prettier
After Prettier

So if you want to use only Prettier for your project you may end up like this fellow:

You can avoid this by using ESLint and Prettier together with TypeScript. If you want to maintain your code quality and a robust context you may need to do so. If you want to learn how, keep reading 🙂

Firstly use rulers in VSCode to maintain the readability of your functions. This way you can see whether your function is wide enough. To set rulers on your workspace you can add this configuration in your settings.json:

settings.json in your VSCode

To use Prettier and EsLint together you need to install some extensions and packages. Additionally, you need to make some configurations in your workspace. I will try to explain these steps below:

1- Make sure to install these extensions on your VS Code:

2- Install these packages:

  • eslint
  • eslint-config-prettier
  • eslint-plugin-prettier
  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
yarn add eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

eslint-config-prettier

“Turns off all rules that are unnecessary or might conflict with Prettier. This lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier. Note that this config only turns rules off, so it only makes sense using it together with some other config.”

eslint-plugin-prettier

“Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.”

@typescript-eslint/eslint-plugin, @typescript-eslint/parser

Basically these two packages will help you to use ESLint and TypeScript together.

3- You need to configure your .eslintrc.json file:

4- In your user settings.json add these configurations:

This will help you to see the compile-time errors and warnings when you save the file. If you didn’t define a return type for your function you will see that twinkling ugly yellow underline 😏.

you can open your user settings.json this way

5- If you use mono repo there is one more step you should configure. In your workspace settings.json add this configuration:

If your project is a mono repo, you should set this configuration for your sub repositories.

Congratz 🎉 You are all set up 🙂.

Thank you for reading. I hope it is beneficial for your project.

Happy coding!

Frontend Engineer @ Backbase

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store