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

Answer 1

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 .

Answer 2

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

Answer 3

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
  }
}

Answer 4

I finally found a solution ! Removing /Users/<user>/Library/Application\ Support/Code folder before uninstalling VSCode and then reinstall it. This removed the previous settings of VSCode which wasn't the case when simply deleting it from Application folder.

I don't know what was wrong but I couldn't see anything related to typescript in the interface before (like the version used next to Typescript in bottom bar) but this fixed the problem.