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.

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.

• javascript
• visual-studio-code

• 1 I've only ever had a jsconfig.js: I've never had a tsconfig.json, because I've never done Typescript. The only way TypeScript is related is that using it in some sense, via the checkJs compiler option, is somehow necessary to get automatic imports. But just because I want VS Code to use Typescript to infer some types when importing, that doesn't mean I care about some code lacking a type in my Javascript code ... which is why I'm looking for some sort of compromise. – machineghost Commented May 31, 2020 at 15:55
• I copied my jsconfig.js (including checkJs: true) into a tsconfig.js: it did nothing. – machineghost Commented May 31, 2020 at 16:57
• 1 Unfortunately that just describes the various ways of enabling type-checking, such as the checkJs option in jsconfig.js I'm using. However that mechanism , and the others listed (eg. // @ts-check) seem to be an all or nothing deal: you get all the features and the TS warnings, or none. I'm trying to get the features, but somehow disable/hide/ignore the Typescript warnings about not having types for things in my JS files (because my jS files have no type definitions). Even just a way to "turn off" certain warnings/errors by code (eg. don't show me ts(2604) errors) would be helpful. – machineghost Commented May 31, 2020 at 17:23
• But it's not in any way about Typescript, except to the degree that VS Code involves it: my question is 100% about writing Javascript in Visual Studio Code, so I feel like Typescript tags would be misleading. – machineghost Commented May 31, 2020 at 18:39
• Does // @ts-nocheck on top of js file work? – Vega Commented Jun 2, 2020 at 14:20

3 Answers 3

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.

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.

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"].