CODEWITHSUNDEEP
javascriptreactjsvisual-studio-codejavascript-intellisense
Reilly
Reilly

Reputation: 137

How can I get error highlighting for missing imports in Visual Studio Code?

When working with Visual Studio Code on Windows to develop Angular applications, I recall that if I removed an import statement, vscode would almost immediately underline in red all of the places where those artifacts were being referenced.

However, now I am working in vscode on a Mac to develop React applications, and I've noticed that if I remove an import statement, I do not get any red-underlining like I am used to.

Any thoughts as to how I can get this functionality back? I imagine its due to an Angular package I had installed on my previous workspace, that I no longer have.

Upvotes: 6

Views: 11036

Answers (3)

Ateeb Asif
Ateeb Asif

Reputation: 184

you can create a jsconfig.json file at your root folder and add these compiler option. chekJs will check the javascript errors and jsx will check the errors inside the jsx. Well this worked for me as i was also not getting any highlights but with these options it worked for me.

{
  "compilerOptions": {
   "checkJs": true,
    "jsx": "react",

      // these are just imports configuratoins
    "baseUrl": ".",
    "paths": {
     "@src/*": ["src/*"],
     "@components/*": ["src/components/*"],
     "@pages/*": ["src/pages/*"],
    "@assets/*": ["src/assets/*"]
    }
  }
}

Upvotes: 3

gentlee
gentlee

Reputation: 3717

@Matt Bierner gave a good advice to check instructions, but after reading it I can say that the best option is to create or modify jsconfig.json by adding "checkJs": true

{
  "compilerOptions": {
    "checkJs": true,
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Upvotes: 8

Matt Bierner
Matt Bierner

Reputation: 65313

By default, VS Code only checks the syntax of JS files and will not complain about undefined variables like it does with TypeScript

You can follow these instructions to enable type checking in plain old JS files. The simplest approach is to add //@ts-check at the top of the file

Upvotes: 2

Related Questions