How to fix Typescript linting not working in VSCode?

Question

In my settings.json, I have:

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

Yet my typescript support isn't working. It catches the errors during runtime but doesn't show a red squiggly line (example below).

I also get an error when enabling ESLint and Prettier doesn't work when I enable ESLint:

ESLint: Failed to load parser '@typescript-eslint/parser' declared in 'template/.eslintrc.js': Cannot find module 'typescript' Require stack: - /Users/henryboisdequin/Desktop/MyAwesomeProject/node_modules/@typescript-eslint/typescript-estree/dist/parser.js - /Users/henryboisdequin/Desktop/MyAwesomeProject/node_modules/@typescript-eslint/typescript-estree/dist/index.js - /Users/henryboisdequin/Desktop/MyAwesomeProject/node_modules/@typescript-eslint/parser/dist/parser.js - /Users/henryboisdequin/Desktop/MyAwesomeProject/node_modules/@typescript-eslint/parser/dist/index.js - /Users/henryboisdequin/Desktop/MyAwesomeProject/node_modules/eslint/lib/cli-engine/config-array-factory.js - /Users/henryboisdequin/Desktop/MyAwesomeProject/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js - /Users/henryboisdequin/Desktop/MyAwesomeProject/node_modules/eslint/lib/cli-engine/cli-engine.js - /Users/henryboisdequin/Desktop/MyAwesomeProject/node_modules/eslint/lib/cli-engine/index.j

How do I fix this problem?

Geriatrics

Answer 1

The way to fix this problem is to follow these steps:

1. Close VSCode

2. CD into applications

/Users/<user>/Library/Application\ Support

3. Check where VSCode folder is located (find whether it is code/ or .vscode/)

ls

4. Delete the VSCode folder

rm -rf code/ or .vscode/

5. Open up VSCode - there should be all your extensions there but stuff like your theme, extension settings will not be configured -

6. Now everything (extension settings, theme, etc) will be reset

Geriatrics

Answer 2

You can follow the steps to fix typescript

You can also try checking the TypeScript server logs to see why TSLint is not working:

• In your VS Code user or workspace settings, set "typescript.tsserver.log": "terse"
• Open a TS file that you believe should have TSLint enabled.
• In the VS Code command palette, run TypeScript: Open TS Server Log.

Arrogate

When I do this, Prettier works and ESLint works on JS files but TS still doesn't have red lines. – Geriatrics

I added a .eslintrc.json but it still is not giving me typescript support, only telling me to use single quotes in my typescript file – Geriatrics

It works now, I reinstalled VSCode. Turns out I did the ESLint settings wrong at the beginning thanks for your help – Geriatrics