CODEWITHSUNDEEP
typescripteslinttypechecking
kalisjoshua
kalisjoshua

Reputation: 2496

ESLint not reporting TypeScript compiler type checking errors

Looking for help in getting the type errors, reported by the TypeScript compiler, into the output of ESLint. The library typescript-eslint (https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md) makes me think that this should be possible.

File structure

src/
  ... source files
  tsconfig.json
test/
  ... testing files
.eslintrc.js
package.json
tsconfig.json (symlink to src/tsconfig.json)

.eslintrc.js

module.exports = {
  'env': {
    'jest': true,
    'node': true,
  },
  'extends': [
    'airbnb-typescript/base',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:jest/recommended',
  ],
  'parser': '@typescript-eslint/parser',
  'parserOptions': {
    'project': ['./tsconfig.json'],
    'tsconfigRootDir': __dirname,
  },
  'plugins': [
    '@typescript-eslint',
    'jest',
  ],
  'root': true,
};

package.json

{
  "name": "...",
  "version": "...",
  "description": "...",
  "scripts": {},
  "devDependencies": {
    "@types/jest": "^25.1.3",
    "@typescript-eslint/eslint-plugin": "^2.21.0",
    "@typescript-eslint/parser": "^2.21.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-typescript": "^7.0.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jest": "^23.8.1",
    "jest": "^25.1.0",
    "nock": "^12.0.2",
    "ts-jest": "^25.2.1"
  },
  "dependencies": {
    "@types/node": "^13.7.7",
    "aws-sdk": "^2.630.0",
    "jsonschema": "^1.2.5",
    "typescript": "^3.8.3"
  }
}

The output of ESLint is empty - no errors - but when running the TypeScript compiler, to build the project, there are many errors reported; for instance:

src/file.ts:xx:xx - error TS2339: Property 'body' does not exist on type 'object'.
src/file.ts:xx:xx - error TS2314: Generic type 'Promise<T>' requires 1 type argument(s).
src/filets:xx:xx - error TS7006: Parameter 'err' implicitly has an 'any' type.

Am I missing something in the configuration or is it improper in some way? Or is this not something that is actually possible?

I'd like to get the errors reporting through ESLint because I have the linting errors showing in my editor as I work on the project. I am using Atom (https://atom.io/) but I would also like this to work for VSCode and possibly VIM as well; team members prefer different editors.

Upvotes: 71

Views: 52277

Answers (2)

Gordon Burgett
Gordon Burgett

Reputation: 1722

Unfortunately ESLint only reports errors from its own linters, it does not report typescript compilation failures. I sympathize with you - in my projects, I use Babel for quicker typescript transpiling, but since Babel doesn't actually check the types (it just removes them), I still need that type checking as a separate lint step.

This blog post https://iamturns.com/typescript-babel/ describes how you can set up a check-types script inside your package.json to perform this linting function, and treat the typescript compiler as a secondary linter. You could even have it run inside the same lint command where you run eslint:

{
  ...
  "scripts": {
    "check-types": "tsc --noemit",
    "eslint": "eslint",
    "lint": "npm run eslint && npm run check-types",
  }

Then you'd set up your continuous integration server to run npm run lint as one of its build steps.

For your editor, there appears to be a Atom plugin for typescript: https://atom.io/packages/atom-typescript
That would be the ideal way to get your typescript errors to show up in your editor. VSCode has this functionality built-in. I primarily use VSCode and it works great!

The last setting I'd recommend for VSCode is to use eslint's "auto fix" feature together with VSCode's eslint plugins, and configure it to run eslint whenever you save the file. You do this inside .vscode/settings.json on a per-project basis:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

Upvotes: 118

Ahsan Farooq
Ahsan Farooq

Reputation: 957

You can use the following to setup reporting TypeScript type-checking errors:

  "scripts": {
     "lint": "eslint src/**/*.{ts,tsx}",
     "lint:fix": "eslint src/**/*.{ts,tsx} --fix",
     "prettify": "prettier --write src/**/*.{ts,tsx}",
     "type-check": "tsc --noEmit",
   },
  "lint-staged": {
     "*.{ts,tsx}": [
       "eslint",
       "prettier --write",
       "git add"
     ]
   },

And finally to run the script to check both linting and type-checking errors, you can use the following command:

yarn type-check && lint-staged

Upvotes: 3

Related Questions