Intellisense of imported libraries

[jasonwilliams]

Hey great extension. This is a good way to try out/play with new libraries.

This may be a long shot but worth asking. Is it technically possible to get completions for libraries added in the "script.js" pane? I can imagine this isn't easy but would be awesome if doable.

So "jQuery" for example. Its added in my "scripts" array. Can definitions be pull down on the fly and used by VSCode?

Automatic Type Acquisition

We can rely on VSCodes Automatic Type Acquisition it sounds like we can force this in a jsconfig.json file and VSCode does the rest. Just auto generate the file and place it in the same directory as the script.js. Below ive done it manually.

Before:

Then in the same folder I add jsconfig.json

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

After:

That works well! The only downside here is we can't force a specific version. I think VSCode just grabs the latest.

Automatic type acquisition will always download the declaration file for the latest version of a library. If you're using a different version, there may be mismatches between what's shown in Intellisense and what's actually available at runtime https://ticehurst.com/jsdocs/articles/types/ata.html

skypack

I just found that Skypack supports typescript declarations in its CDN. It sends the path in its header response. More info here: https://docs.skypack.dev/skypack-cdn/api-reference/lookup-urls#typescript-declarations

jQuery: https://cdn.skypack.dev/jquery jQuery Type: https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=types/index.d.ts

I'm not sure how easy it is to traverse those types and download them

It would also be nice to point directly to type declarations but I don't think that's possible right now. https://github.com/microsoft/TypeScript/issues/28985 might be a blocker

@FredKSchott can Skypack/Snowpack be utilised here in anyway?

Other ideas: Auto generating something like this https://dev.to/patarapolw/cdn-and-typescript-support-also-javascript-typing-for-ide-1bko, adding a package.json, then

There's also https://github.com/tokilabs/autotypes

[lostintangent]

Yeah this would be a huge improvement to the experience 😄 As you suggested, I think I'd need support from TypeScript in order to make this work. That said, I need to investigate whether I could create a VS Code/TypeScript extension point, and "inject" typings into the language server myself. I'm not sure if that's possible, but it's worth checking out 😄

[jasonwilliams]

@lostintangent did you see the updated edit I made to my post? I managed to get it working without typescript, sadly it will always choose the latest version for typings though. I think if you specify a version in package.json it may use the typings version for that

[lostintangent]

Yeah I saw that. But I'm curious if we can remove the need for the manual jsconfig.json file by implementing a TypeScript server plugin that dynamically does the same thing.

[jasonwilliams]

I set a version in package.json and it looks like it didn't affect the typing version. So i think the jsconfig.json option would only work for latest. Shame.

I've never implemented a typescript server plugin so im not sure what they're capable of doing.

[jasonwilliams]

https://stackoverflow.com/questions/39698336/inject-implicit-ambient-typings-via-visual-studio-code-extension might help

[Darsh2987]

Would love to see this.

[jasonwilliams]

As an attempt to move forward, here is an option:

• When a new (JS) swing is generated, create a new jsconfig.json in the temp directory. I'm assuming this isn't difficult because other files (style.css, script.js, index.html) are generated so you just create it along with these.
• Populate the jsconfig.json file with:

{
  "typeAcquisition": {
    "include": []
  }
}

• When a user selects a library, if they choose "latest", push the name of that library to typeAquisition.include then re-save file.
• This should trigger VSCode to download the types for that library.

I've been doing the above manually and it seems to work well. it's a quick win which gets you 90% of the way there. I couldn't see it being possible with the typescript plugin route.

Skypack have type declarations but you would need some sort of parser/crawler to bring them down. Typescript does not automatically fetch types from url-based imports, only Deno does this currently.

[lostintangent]

This will be fixed in the next extension release

[jasonwilliams]

Good to see you’re back on this @lostintangent How did you fix it?