CODEWITHSUNDEEP
javascriptvisual-studio-code
machineghost
machineghost

Reputation: 35705

In VS Code Can I Validate my Javascript But Ignore a Specific Typescript Error?

I am writing Javascript in Visual Studio Code (not Typescript). However, I added "checkJs": true ("Enable type checking on JavaScript files") to my compilerOptions in jsconfig.json to enable automatic imports.

Now that I have done that, I'm getting Typescript errors (squiggly lines), for instance:

JSX element type 'Foo' does not have any construct or call signatures. ts(2604)

I could remove these by disabling validity checking, but then I'd lose normal Javascript validity checking.

My question is: is it possible to have automatic imports, and Javascript validity checking, but not have Typescript errors in VS Code? For instance, is there some flag I can set in jsconfig.json to disable errors with "ts" at the end?

And if not, how do I fix Typescript errors in a Javascript file ... without having to adopt Typescript?

EDIT: Just to help clarify the kind of solution I'm imagining ... let's say we were talking about ESLint here. Yes I could add a comment at the top of a file to make ESLint ignore that file, but then I lose all linting whatsoever.

I'm more looking for the equivalent of being able to say "ts2604": false or "ts*": false in an .eslintrc file, or something more like that. In other words, I don't want to adopt Typescript, or lose all type awareness either ... I just want VS Code's great Javascript features, without large chunks of my code being underlined by error/warning messages that I can't do anything about.

Upvotes: 18

Views: 8799

Answers (3)

Matt Bierner
Matt Bierner

Reputation: 65543

VS Code's JavaScript type checking is powered by TypeScript. The errors you are seeing in your JS files are not TypeScript language errors, they are the TypeScript engine saying: "Hey this JavaScript code looks like it is invalid". The TypeScript engine tries to understand JavaScript as well as possible, but JavaScript's dynamic nature can sometimes trip it up and you may need to help it along with some JSDoc annotations .

So ideally you should address these errors. If this is not possible, you can suppress the errors using a // @ts-ignore comment on the line above the error (this is offered as a quick fix for the error)

This TypeScript feature request also tracks the ability to suppress specific error codes.

Upvotes: 5

Keith
Keith

Reputation: 155832

This could be a red herring, but are all your errors JSX related? TypeScript can handle JSX (in *.tsx ot *.jsx files) if you specify the factory to use for the JSX. The error looks like TS can't find the factory class (so it's got <Foo> and doesn't know what to pass it to). Typically this will be something like (the settings say React, but they're the same for Preact or other JSX libraries):

"compilerOptions": {
    "jsx": "react",
    "jsxFactory": "probably the same as transform-react-jsx setting in your plugins"
}

There's much more on that in the TS docs.

Generally I find it best practice to fix TS errors before JS anyway, but that isn't always practical, so another option is adding // @ts-ignore on the preceding line or // @ts-nocheck to skip type checking in the file.

// @ts-ignore is really intended for this kind of situation, but it's not a long term fix - you're upgrading, you know it works, you just need TS to skip the failing check for now. But, when you know the code works and TS is missing a definition somewhere it can be the right patch.

Upvotes: 5

leguminator
leguminator

Reputation: 184

Lately I have been coding in React with Visual Studio Code and we have a team recommandation for using ESLint extension.

It has many configuration capabilities, and the following one may match with your needs :

eslint.probe = an array for language identifiers for which the ESLint extension should be activated and should try to validate the file. If validation fails for probed languages the extension says silent. Defaults to ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"].

Upvotes: 1

Related Questions