Setting up ESLint for TypeScript

TypeScript is quite amazing in finding syntactical problems for us, even before we run or test the program. But we can do one better than that, we can use ESLint to also check through our code and find additional problems for us.

ESLint has a myriad of linting rules that you can tweak to your hearts content, but don’t. Use a prepackage set of rules that others are using. The linting rules are really not that important (should it be 2 or 4 spaces, should it be semicolon at the end etc - who cares…) - the important thing is to have the same rules in your team, and the to follow those rules.

We have prepackaged a good set of rules for TypeScript development in eslint-config-salt-typescript package. Our rules are in turn based on the famous AirBnb ruleset

Getting started is pretty simple, but with one gotcha. More on that later

Setup a project for TypeScript with ESLint

Do this to setup up a new project for TypeScript development. I’m doing the minimal setup here, just to show linting and node development. You should do tests, and might need to add other properties if you are developing for the DOM, for example:

mkdir ts-eslint-demo && cd ts-eslint-demo
mkdir src && touch src/index.ts
npm init -y
npm i typescript ts-node -D
npm i @tsconfig/node16 @types/node eslint-config-salt-typescript  -D

# Add script programmatically. Thank you, marcusoftnet Inc
npx scradd . "lint" "npx eslint src/*.ts"

Create a tsconfig.json file with settings for TypeScript, for example like this:

{
  "extends": "@tsconfig/node16/tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
  },
  "include": ["src"],
  "exclude": ["node_modules", "src/**/*.spec.ts"],
}

Finally add a .eslintrc (or .eslintrc.json) file like this, as written in the instructions of eslint-config-salt-typescript:

{
  "extends": "salt-typescript",
  "parserOptions": {
    "project": ["./tsconfig.json"]
  }
}

You can now lint the code by running npm run lint. For example write this code in src/index.ts and you will get a few nice, easy fixable linting errors:

let name:string




name = 'Marcus'

console.log(name);

Psst - try npm run lint -- --fix and ESLint will help you out a bit.

A common error

If you get this error (that me personally HATE WITH THE HEAT OF 10000 SUNS):

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

You have probably forgot to add the parserOptions node in the .eslintrc file:

"parserOptions": {
  "project": ["./tsconfig.json"]
}

This setting tells ESLint to use the same configuration for TypeScript validation that you are configuring in tsconfig.json.

Hopefully this will help you get up and running with TypeScript and ESLint a bit faster.