How to setup TSLint and Prettier for TypeScript projects

Published on February 11, 2020
#typescript
Follow me on twitter

UPDATE 10/10/2020: Tslint is being deprecated. You should consider changing to Eslint. I have a guide for that here: TSLint is deprecated: How to upgrade to ESlint.

TSLint will help us identify potential issues in our code by examining how we use language features.

Prettier will format code consistently but needs some configuration to work with TSLint.

Together they make code-reviews easier and faster because if you run both of them you will identify many common code review errors before pushing your code.

There needs to be some configuration to have both work together. Here is my cheatsheet for setting this up on a project.

Setup Prettier and TSLint in your project

Add the tslint.json file and any configs you need. here are mine.

{
  "extends": [
    "tslint:recommended",
    "tslint-eslint-rules",
    "tslint-microsoft-contrib",
    "tslint-consistent-codestyle",
    "tslint-config-prettier"
  ]
}

Next we add the package(s) to support our configuration above.

yarn add --dev tslint tslint-consistent-codestyle tslint-eslint-rules tslint-microsoft-contrib tslint-config-prettier

Setup VScode to use prettier for formatting

Install the TSLint plugin and prettier extensions for VSCode.

With the TSLint plugin VSCode will highlight and offer suggestions for typescript issues.

Now when you format the file (Shift-Alt-F) you will be asked which formatter you want as a default formatter. Choose Prettier.

Set VSCode to autoformat on save

Now set VSCode to auto format on save:

  1. Ctrl-Shift-P and search for “Settings”.
  2. Open the “Settings:UI” option.
  3. In the settings UI search for “Format On Save”.
  4. Tick the box!
Darragh ORiordan

Hi! I'm Darragh ORiordan.

I live and work in Sydney, Australia building and supporting happy teams that create high quality software for the web.

I also make tools for busy developers! Do you have a new M1 Mac to setup? Have you ever spent a week getting your dev environment just right?

My Universal DevShell tooling will save you 30+ hours of configuring your Windows or Mac dev environment with all the best, modern shell and dev tools.

Get DevShell here: ✨ https://usemiller.dev/dev-shell ✨


Read more articles like this one...

List of article summaries

#typescript

How to write an ESLint plugin in TypeScript

I use NestJS at my day job. It’s a complicated framework sometimes and there are lots of things that devs “just have to remember” or there will be bugs in your application that you won’t see until runtime.

I wanted to remove this cognitive load from NestJS engineers so that they can focus on valuable work instead. I wrote an ESLint plugin to alert developers directly in their IDE or editor when these common issues exist - (Available on NPM) https://www.npmjs.com/package/@darraghor/eslint-plugin-nestjs-typed

Here is what I learned about writing ESLint plugins in typescript for typescript while building the plugin.

Read More
#typescript

Create an only ever true boolean type in typescript

Integrating with an API where a boolean can only be undefined or true I needed to type it. It’s easy enough but I just wanted to jot it down in case any one else needs this in the future.

Read More
#typescript

How to change the type of output for a property filter in typescript

If you have an iterable filter on a property in typescript you might have a slightly different model coming out of the filter based on the filter condition.

By setting the types correctly you can potentially save having to add manual typing hints in whatever follows the filter.

It’s easier to show this with code so see below!

Thanks to one of my colleagues for suggesting this one in a code review.

Read More
#typescript

Copying missing files during a typescript build on deploy

If you build your nodeJS project using typescript, it’s important to know that the typescript compiler tsc will only include files that are .js or .ts.

If you have an issue where you deploy or build a typescript project and you get a file not found issue or similar, it’s probably because you missed that typescript does not process these kinds of files for you.

If you need to include files like XML (.xml) or images in your typescript project build output, you will have to copy them manually before or after the build process.

This is one way to copy assets in a typescript build.

Read More

Comments