How to set up Eslint with Typescript in VSCode

Introduction

If you have ever been part of a development team, you probably know that every single one of us has a different code formatting, semantics standards (and that's totally fine 😅). However, when you are all developing on one thing, it's very handy to follow one strict pattern so the codebase isn't a mixture of everything.

However, it would be pretty hard and inefficient for all developers to get used to one pattern (because we have side-projects where we use different style-guide and so on).

Eslint to the rescue!

Eslint is a tool, which forces the developer to format their code according to selected rules.

E.g. rule: don't use semicolons in your code.

// The semicolon below would be underlined and showing error on hover
console.log("I shouldn't be using semicolons there");

So this way, all developers would have errors in their IDE/Text editor if they had semicolons in their code, but for some reason, they might ignore that errors/warnings and still commit changes. Fortunately, eslint can handle even that and automatically fix the errors on file save!

Unfortunately, developers might not have prepared their IDE/Text editor to work with eslint and wouldn't see those errors, but we can still create an eslint script which will run on our CI. That way we can ensure only correctly formatted code will be merged. 🙌

Why typescript?

You probably heard of typescript, it's basically javascript with types (but there is much more in it!). It adds another layer of certainty to your code. However, it is a little bit tricky to make it work with eslint so let's dive into it!

Visual Studio Code setup

First of all, we need to "teach" our editor to understand eslint 😄
So we'll install this extension.

After installation, we need to explicitly tell eslint extension to watch typescript files for linting errors (by default it lints only javascript and JSX files). Follow these instructions:

• Inside VS Code use: Ctrl+Shift+P or Shift+Cmd+P
• Type: Preferences: Open Settings (JSON)
• Select the option
• Paste this code inside the opened JSON file

{
    "eslint.validate": [
        "typescript",
        "typescriptreact"
    ]
}

Note that if you hit Ctrl+Shift+P or Shift+Cmd+P in VS Code and type eslint it will show you all commands available for this extensions! However, the commands won't work because we haven't installed eslint dependency, let's do it now!

Install eslint to your project or globally on your machine

We have two options now:

1) We will install eslint dependency globally (means it will be available for all projects on your machine, cool!)

# using npm
npm install -g eslint
# using yarn
yarn global add eslint

2) We will install dependencies per-project, which can be useful to explicitly tell a developer to use these.

# Go to the root of the project (where package.json lives)
cd my-project
# using npm
npm install -D eslint
# using yarn
yarn add -D eslint

It's your choice which one of these you want to use

Teach Eslint to work with Typescript

Eslint by default doesn't understand Typescript syntax. That's why you might hear of tslint, which is (was) used instead of eslint for Typescript project, but the backers of this package announced earlier this year deprecation of tslint in favour of typescript-eslint project (which is monorepo, so we are gonna install few packages from it).

# using npm
npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
# using yarn
yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

We'll make configuration file for eslint. It can be of three different types:

• Javascript file
• JSON file - we'll take this one
• YAML file
• eslintConfig field in package.json

Create .eslintrc file in the root of your project and paste this code inside:

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "rules": {
        "semi": ["error", "never"],
        "quotes": [2, "single"]
    }
}

We are adding the @typescript-eslint/parser (which will parse typescript files, so eslint understands them correctly). Then under plugins, we add @typescript-eslint plugin which gives us the possibility to add rules specific to typescript code. Under rules we added some sample rules (no semicolons allowed, and use single quotes instead of double)

With this, if you create anywhere file with .ts or .tsx extension and write code like this:

console.log("This shows errors");

You should see the string being underlined and the semicolon too. Showing you what rules this code violates.

Adding automatic lint errors fixing!

Cool, now editor shows error when we type something that violates our eslint rules and we can manually fix them, but that's time-consuming, we can do better with automatic fixing!

All we need to do is to tell our VS Code eslint extension to run eslint --fix command on file save.

• Inside VS Code use: Ctrl+Shift+P or Shift+Cmd+P
• Type: Preferences: Open Settings (JSON)
• Select the option
• Update eslint-related code inside the opened JSON file

{
    "eslint.validate": [
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
}

Now whenever you save typescript file with eslint errors, it will be automatically fixed. Awesome!

Executing eslint on command line!

We are almost finished, the last piece of work we need to do is to set up a script that will run eslint check.

The script might be executed on your CI to ensure that pushed code is correctly formatted.

To check code on your command line is very easy with eslint, look at this:

# Scans from the root of the project
eslint .
# Scans only src directory of the project
eslint src/*

However, there is a little gotcha in these commands. Do you know why? 🤔

It scans only javascript files by default, so typescript files will be ignored. So if you didn't have any javascript file in your project and only typescript files, you would see something like this:

Oops! Something went wrong! :(

ESLint: 6.6.0.

No files matching the pattern "." were found.
Please check for typing mistakes in the pattern.

So to lint typescript file we need to add an argument --ext <comma-seperated-list-of-file-extensions-to-watch. So with this in mind, the command would look like this:

# Scans from the root of the project
eslint --ext ts,tsx .
# Scans only src directory of the project
eslint --ext ts,tsx src/*

That's all, you have now configured eslint with typescript! 😎

This post was published on my blog, so you can check it out here!

Comments

[WORMSS]

I got to the point where it said you shouldn't use semi colons. At that point I just had to stop.

[Molly Crendraven]

For those confused, here is a good read on the subject: flaviocopes.com/javascript-automat...

[WORMSS]

I know all about ASI, if I had godly powers, I would remove it from Javascript

[Adam Ross Bowers 🇬🇧 / 🇳🇱]

Definitely prefer having my semi colons. I agree things make look cleaner but I find it easier to read with them!

[wkrueger]

This is one thing I keep procractinating but I seriously need to catch up.

Reason number 1: react hooks