ESLint

ESLint existed to lint JavaScript, but now it is also becoming the defacto linter for TypeScript, thanks to the collaboration between the two teams.

Install

To setup ESLint for TypeScript you need the following packages:

npm i eslint eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

TIP: eslint calls packages that contain lint rules as "plugin"

• eslint : Core eslint

• eslint-plugin-react : For react rules provided by eslint. Supported rules list

• @typescript-eslint/parse : To allow eslint to understand ts / tsx files

• @typescript-eslint/eslint-plugin : For TypeScript rules. Supported rules list

As you can see there are two eslint packages (for use with js or ts) and two @typescript-eslint packages (for use with ts). So the overhead for TypeScript is not that much.

Configure

Create .eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules:  {
    // Overwrite rules specified from the extended configs e.g. 
    // "@typescript-eslint/explicit-function-return-type": "off",
  }
}

Run

In your package.json add to scripts:

{
  "scripts": {
    "lint": "eslint \"src/**\""
  }
}

Now you can npm run lint to validate.

Configure VSCode

• Install extension https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

• Add to settings.json:

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