Typescript errors not showing in VSCode editor using typescript-eslint

Question

My issue is that I cannot display typescript errors in editor using eslint and @typescript-eslint (on VSCode for MacOs).

Eslint errors are showing but not type errors as shown on this screenshot (tsx file)

Here the issue about unused variable is displayed but the type error when calling typedFunction is not. If I run tsc in my terminal the error will raise.

Eslint extension is installed my VSCode editor. Here is my .eslintrc :

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "react-app",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
  "plugins": [
    "import",
    "prefer-object-spread",
    "prettier",
    "react",
    "@typescript-eslint"
  ],
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "globals": {
    "alert": true,
    "document": true,
    "localStorage": true,
    "navigator": true,
    "window": true,
    "HTMLElement": true
  },
  "rules": {
    "prettier/prettier": "error",
    "import/extensions": 0,
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true,
        "optionalDependencies": false,
        "peerDependencies": false
      }
    ],
    "import/no-unresolved": 0,
    "import/prefer-default-export": 0,
    "prefer-object-spread/prefer-object-spread": 2,
    "react/destructuring-assignment": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
    "react/no-array-index-key": 2,
    "react/prefer-stateless-function": 0,
    "react/prop-types": 0,
    "react/require-default-props": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-member-accessibility": 0,
    "@typescript-eslint/camelcase": 0,
    "@typescript-eslint/interface-name-prefix": 0,
    "complexity": ["error", 8],
    "max-lines": ["error", 200],
    "max-depth": ["error", 3],
    "max-params": ["error", 4]
  }
}

I tried removing all VSCode extensions, uninstalling VSCode, reboot my computer but nothing worked. My VSCode version is 1.46.0

no, you can use eslint for typescript. @OP can you check what Typescript version VSCode is using and can you try other version? in the command palette select : Typescript: Select Typescript Version — tHeSiD
– tHeSiD, Commented Jun 12, 2020 at 18:40
Thanks for your answer. When i open the command palette an type Typescript no results are returned. I'm on MacOs is it maybe the reason ? — Elie Dutheil
– Elie Dutheil, Commented Jun 13, 2020 at 16:18
But the version in my repository (installed in node_modules) is Version 3.9.3 and globally my version is Version 3.9.5 — Elie Dutheil
– Elie Dutheil, Commented Jun 13, 2020 at 16:27

bochengkor · Accepted Answer · 2020-11-29 18:05:19Z

35

In your VSC's Extensions panel, type "@builtin" and look for "TypeScript and JavaScript Language Features" in the "Features" section. It is most probably disabled. Enable it and restart your VSC. As suggested by Matt Bierner from here.

answered Nov 29, 2020 at 18:05

bochengkor

3764 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dsomel21 Over a year ago

I have tried to get "started" with TS for many years, but never got passed this step! This worked perfectly.

Aaron Over a year ago

Thank you! My "TypeScript and JavaScript Language Features" was already enabled, but not working, so I disabled it, reloaded, and re-enabled it. Worked like a charm!

Travis Tubbs Over a year ago

This did it for me! Good answer!

Beadle Over a year ago

Thanks for this! The ole "turn it off and back on again" approach fixes another bug. 🎉

Hazy Over a year ago

I had the both typescript @builtin features enabled but was still not getting the errors shown when hovering. Turns out I had "typescript.validate.enable": false,' in my settings.json and this was the culprit. Removing that line got it working properly...

|

Ryan McGrath · Accepted Answer · 2023-12-05 21:51:59Z

1

In my case I had typescript properly configured and working in the past, but it regressed without me touching any configs. My solution was to open up the command palette, and run Typescript: Restart TS Server. Errors came back in my problems pane after that.

answered Dec 5, 2023 at 21:51

Ryan McGrath

2,7281 gold badge13 silver badges12 bronze badges

Comments

divyanshu · Accepted Answer · 2021-06-23 08:24:32Z

0

VSCode does not have an in-built typescript linter. https://code.visualstudio.com/docs/languages/typescript#_linters

Install ESlint extension from the marketplace for JS and TS lint error. If it is already installed, and typescript is introduced at later stage, just reinstall ESlint extension and restart the VSCode

answered Jun 23, 2021 at 8:24

divyanshu

1515 bronze badges

Comments

Igor Kurkov · Accepted Answer · 2021-11-24 10:50:26Z

-2

You need to add a tsconfig.json file to your project, it would work. Something like this

{
  "exclude": ["node_modules", "node_modules/**/*"],
  "compilerOptions": {
    "baseUrl": "./",
    "lib": ["es5", "es6", "dom", "es2018.promise"],
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./build",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": false,
    "strict": true,
    "strictPropertyInitialization": false,
    "skipLibCheck": true, 
    "suppressImplicitAnyIndexErrors": true
  }
}

answered Nov 24, 2021 at 10:50

Igor Kurkov

5,1893 gold badges36 silver badges38 bronze badges

Collectives™ on Stack Overflow

Typescript errors not showing in VSCode editor using typescript-eslint

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related