Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ESLint not reporting TypeScript compiler type checking errors

Tags:

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.

like image 235
kalisjoshua Avatar asked Mar 03 '20 20:03

kalisjoshua


People also ask

Does ESLint check TypeScript errors?

Unfortunately ESLint only reports errors from it's own linters, it does not report typescript compilation failures.

How do I test for TypeScript errors?

ESlint doesn't check for TypeScript errors, so if you want to check for TypeScript errors in your pre commit hook, you'll need to run the tsc --noEmit command in addition to the ESLint command.

Should I use ESLint or TSLint?

I suggest do not use TsLint because it's deprecated and EsLint have more linting features than TsLint . Show activity on this post. TSLint can only be used for TypeScript, while ESLint supports both JavaScript and TypeScript. It is likely, within a large project that you may use both JavaScript and TypeScript.

What does TypeScript ESLint parser do?

typescript-eslint enables ESLint to run on TypeScript code. typescript-eslint : allows ESLint to parse TypeScript syntax. creates a set of tools for ESLint rules to be able to use TypeScript's type information. provides a large list of lint rules that are specific to TypeScript and/or use that type information.


1 Answers

Unfortunately ESLint only reports errors from it's 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 it's 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   } } 
like image 90
Gordon Burgett Avatar answered Oct 05 '22 23:10

Gordon Burgett