Linting with TypeScript ESLint

TypeScript ESLint is the successor of TSLint, the linting tool exclusively developed for TypeScript. It leverages the existing JavaScript linting ecosystem and brings consistency across the tooling to lint both JavaScript and TypeScript apps.

In this post, we'll set up linting with TypeScript ESLint for a TypeScript project.

Install dependencies for typescript-eslint

Execute the following commands to add required dependencies for typescript-eslint.

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

Create configuration file

Generate an eslint configuration file with the following command.

npx eslint --init

Replace the contents of .eslintrc.js with the following configuration.

 1module.exports = {
 2  'parser': '@typescript-eslint/parser',
 3  'extends': ['plugin:@typescript-eslint/eslint-recommended'],
 4  'parserOptions': {
 5    'ecmaVersion': 2018,
 6    'sourceType': 'module'
 7  },
 8  'plugins': ['@typescript-eslint'],
 9  'rules': {
10    'quotes': ['error', 'single'],
11    'semi': ['error', 'always'],
12    '@typescript-eslint/explicit-function-return-type': 'off',
13    '@typescript-eslint/no-explicit-any': 1,
14    '@typescript-eslint/no-inferrable-types': [
15      'warn', { 'ignoreParameters': true }
16    ],
17    '@typescript-eslint/no-unused-vars': 'warn'
18  }
19}

Edit package.json scripts as follows.

1"scripts": {
2  "prestart": "npm run build && npm run lint",
3  "lint": "eslint src/**/* --fix",
4}

You can lint the files using yarn lint. Also, when the application is started with yarn start, the prestart script will launch the build generation and lint it as well.

References

Source code — linting-with-typescript-eslint

Related

• typescript-eslint repo