ESLint in VSC not working for .ts and .tsx files

Question

I have ESLint extension installed in VSC and it works fine for .js files. Now I've introduced Typescript to my React project, ESLint is no longer working on the fly in VSC.

I have a .eslintrc file in the root of my project like so:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended"
  ],
  "env": {
    "browser": true,
    "node": true,
    "serviceworker": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "@typescript-eslint/indent": ["error", 2],
    "indent": "off",
    "jsx-a11y/anchor-is-valid": ["error", {
      "aspects": ["invalidHref", "preferButton"]
    }],
    "no-console": ["error", {
      "allow": ["error", "info"]
    }],
    "react/no-danger": 0
  }
}

I have an npm script that looks like this:

"scripts": {
  "eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
},

If I run npm run eslint, the whole project gets linted correctly. What do I need to do for the project to lint on the fly with red squiggly lines in VSC?

Answer 1

Assuming you've got eslint extension installed on Visual Studio Code, you should add the following to your settings.

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
    ],

This will make eslint look at typescript files as well as javascript files.