Up and running with TSLint and Prettier

3rd June 2018 - 3 minutes

⚠️ Warning: Since writing this post Palantir have announced that they are deprecating TSLint in favour of ESLint, this article probably isn't the best thing to follow anymore 😁

For anyone looking to write consistent frontend code, especially those of us working in teams, tools like linters and auto-formatters can be a huge help and boost productivity. Gone are the days where you and your team debate over stylistic issues during code review.

If you've ever used a linter in JavaScript it will most likely have been ESLint, ESLint is a great tool but we can't use it when we are writing TypeScript code. Instead, we can make use of TSLint.

Prettier, on the other hand, works out of the box with TypeScript 🎉

Anyway, enough intro - let's get started! First of all you are going to want to install both Prettier and TSLint in your project.

# Yarn
yarn add -D tslint prettier

# or

# NPM
npm install --save-dev tslint prettier

Once these are both installed you need to set up both a Prettier config and a TSLint config. Let's work on our TSLint config first.

./node_modules/.bin/tslint --init

After running the above you should see a tslint.json file in the root of your project that contains the following:

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

If you want to stick with the recommended rules then you don't need to modify this file at all, you are all ready to go. There are also plenty of other pre-defined configuration files you can download and use including my own!

However, if you do want to make some changes you can add any TSLint Rules under the rules key.

Now we have configured TSLint, it is time to focus our efforts on getting Prettier set up.

Create a file in the root of your project and name it .prettierrc, this is where we are going to put all of our auto-formatting rules. Take a look at the Prettier options to see what is available to be auto-formatted and then add your chosen rules to the file. Similarly to TSLint configuration files, you can download .prettierrc files to use in your own projects. Mine is available in my Frontend Config repo on Github so feel free to use it.

We have both TSLint and Prettier configured so let's connect them. This is an important step so we can avoid Prettier and TSLint rules conflicting and it can be helpful for allowing you to view Prettier errors.

# Yarn
yarn add -D tslint-plugin-prettier tslint-config-prettier

# or

# NPM
npm install --save-dev tslint-plugin-prettier tslint-config-prettier

Now all we need to do is make our tslint.json config extend tslint-config-prettier and make use of the tslint-plugin-prettier plugin.

We can do that by modifying the extends and rules sections of tslint.json to look similar to below.

{
  "extends": [
    ...
    "tslint-config-prettier"
  ],
  "rules": {
    ...
    "prettier": true
  },
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ]
}

That's it, all done! 🙌 You now have TSLint and Prettier set up and ready to go in your project. If you haven't already installed a TSLint and Prettier plugin for your editor/IDE I would highly recommend it!

Thanks for reading and I hope you learned something from this!

If you have any questions then tweet at me @lukehglazebrook