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?

N.J.Dawson · Accepted Answer · 2019-06-12 09:09:22Z

48

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.

answered Jun 12, 2019 at 9:09

N.J.Dawson

1,38111 silver badges28 bronze badges

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

5 Comments

Siva-Dev-Wizard Over a year ago

this is great. I was spending too much time with my ESLint config and the documentation and this fixed it!

N.J.Dawson Over a year ago

@Siva-Dev-Wizard I'm not 100% sure this answer is "the correct way" anymore. I think out of the box the eslint plugin in vscode should now scan for TypeScript/ReactTS files. I'll update this answer once I've researched it later though to keep this as correct as possible.

Siva-Dev-Wizard Over a year ago

makes sense. I will check on my end too.

npkp Over a year ago

still not working after adding the above line.

N.J.Dawson Over a year ago

"not working" isn't debuggable. What happens? Does JS work? Etc.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related