ESLint

ESLint existed to lint JavaScript, but now it is also becoming the defacto linter for TypeScriptarrow-up-right, thanks to the collaborationarrow-up-right 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"

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:

Now you can npm run lint to validate.

Configure VSCode

Last updated