TSLint to ESLint

As a active Angular developer, maintaining a good based is pretty important. All along, the standard was TSLint which has now been deprecated in favour of ESLint.

Luckily tools are available to do the migration at : https://github.com/typescript-eslint/typescript-eslint

Unfortunately the documentation is not elaborate and did not work for me. So wanted to note down what worked for me.

First install / update your ESLint as it already has configured to support TypeScript:

npm install eslint --save-dev

Create the configuration file

node_modules\.bin\eslint --init

You can choose your options. I chose:

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? Yes
? Where does your code run? Browser, Node
? What format do you want your config file to be in? JSON
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? Yes

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

It will create a .eslintrc.json file which will look like:

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

Now you check your file or folder :

node_modules\.bin\eslint src\app\app.component.ts

node_modules\.bin\eslint --ext .ts,.js src/

That's all good from command line. Lets not integrate it with VS Code : 

Open File -> Preferences-> Settings -> Open Settings (JSON) (on top right corner)

Append:

"eslint.validate": [
  "javascript",
  "javascriptreact",
  { "language": "typescript", "autoFix": true },
  { "language": "typescriptreact", "autoFix": true }

]