Some Issues Using eslint Together with TypeScript

Recently I’ve been adding lint functionality to Vsnips — mainly because the code I wrote before was really too free-spirited; for future multi-person collaboration it’s necessary to keep a consistent style. After consulting frontend colleagues, I learned tslint has stopped being supported, so I decided to switch tslint to eslint.

Switching to eslint

# uninstall tslint
npm uninstall tslint

# install eslint
npm i -d eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

# use from the command line — call the executable under node_modules directly
./node_modules/.bin/eslint --ext .ts src

The no-unused-vars Problem

This is the problem that troubled me most, yet nobody has blogged about it — apparently not many people really use eslint in TypeScript.

Let me briefly describe the phenomenon:

1
2
3

import { ILogger } from "js-logger/src/types";

const myLogger: ILogger = jsLogger.get("Vsnips");

1 2	/home/corvo/Project/Vsnips/src/logger.ts 19:10 error 'ILogger' is defined but never used no-unused-vars

It gives this error. You can see ILogger is actually used as a type, but eslint still considers it unused. Searching around, a friend had a similar problem:

How to solve no-unused-vars reported when importing an interface in typescript

Under this issue someone mentioned a solution but gave no configuration. I’ll paste my own configuration: turn off eslint’s original function and use the one provided by typescript.

{
    "rules": {
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": "warn"
    }
}

Selective Ignoring

Official docs: configuring certain lines to skip checking

In tslint the following ignores one line:

// tslint:disable-next-line

After switching to eslint, change it to:

// eslint-disable-next-line

I used just these two in the project; use them as needed.

/* eslint-disable */
alert('foo');
/* eslint-enable */

// eslint-disable-next-line
alert('foo');