TypeScript Intellisense Not Working Across Files

[Abdallatif]

Hi! I've been trying to get TypeScript Intellisense to work with multiple files using the demo, but it's not happening. I added a tsconfig file thinking it might help, but no luck there either.

My main goal is to export a function from one file and have VSCode suggest to auto-import it. After that, I want to make sure VSCode can see the node_modules I install and check types correctly.

I saw this project called jside that seems to have everything working, including TypeScript Intellisense. They're doing something different with how files are set up, I think, but I can't figure out exactly what makes it work there and not in my case - demo project.

Any ideas on what I might be missing or doing wrong?

[CGNonofr]

Hi,

The VSCode typescript language features extension only provides per-file intellisense by default.

To provide the project-wide intellisense in the browser, it needs shared array buffers which are only available if crossOriginIsolated is true.

It doesn't work in the online demo of this project but it does work if you pull it locally because we configure the vite server to add some headers

You'll also need to serve the main page html, the ext host iframe html (webWorkerExtensionHostIframe.html) and the ext host worker (extensionHost.worker.js) with those headers

I'll add a troubleshooting section :+1:

[Abdallatif]

Thanks a lot, this was very helpful. Adding the headers fixed the intellisense across files issue for me and the node_modules work out of the box now - except for a few issues.

btw, do you know why extensionHost.worker.js tries to call the npm registry for every module under node_modules folder? Like for example if I have the uuid module, it would send a GET request to https://registry.npmjs.org/uuid. This is causing some issues since I have private modules mounted under node_modules but the worker keeps trying to call the npm registry and npm reject the request!

[CGNonofr]

The npm default extensions calls registry.npmjs.org to get some metadata about packages that are used in the project, are you using it?

you can disable this behavior by setting npm.fetchOnlinePackageInfo to false

[Abdallatif]

I don't have the npm extensions installed. I tried to install it and set npm.fetchOnlinePackageInfo to false but it didn't change anything!

[CGNonofr]

Then I'm not able to reproduce nor seeing any code from this repo referencing registry.npmjs.org

Can you provide a simple reproduction repo?

[Abdallatif]

Sorry for late reply, I forked this repo and added code to reproduce here https://github.com/Abdallatif/monaco-vscode-api Or you can just check the diff in the last commit: https://github.com/Abdallatif/monaco-vscode-api/commit/afa5d7ca23603653cfe5387d1b53de7dbbf23934

When you open the index.ts file, you can see in the network tab it's trying to download the npm packages

I found that if I delete the node_modules folder, vscode would no longer try to download the packages!

[cemalgnlts]

I also found that TS was ignoring the node_modules folder and spent a long time trying to fix it.

They are working on it: https://github.com/microsoft/vscode/issues/182791

But it is not complete and only has ATA (Automatic Type Acquisition) support. It automatically detects the required types and downloads them from npm.

I recently found a library called volarjs that exhibits the same behavior as the TS, plus it doesn't ignore the node_modules folder. (But I could not setup it completely.)

https://github.com/volarjs/vscode-typescript-web/tree/volar-v2

[CGNonofr]

It looks like it's not an issue with this library but with the VSCode typescript extension then, right?

[cemalgnlts]

Yes, that's right, VSCode did not complete this feature in the web version of the extension.

(You must disable ATA so that types are not downloaded automatically: https://github.com/cemalgnlts/jside/blob/main/src/workspace/userConfiguration.json#L38)

[Abdallatif]

@cemalgnlts Yeah, and I tried to do that but the extension fetches the types anyway!

[cemalgnlts]

Sometimes (maybe because of the way I use it) when I delete IndexedDB and refresh the page, the configuration file starts working correctly.

[Abdallatif]

I was able to disable this behavior by commenting out this subscription https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/src/extension.browser.ts#L108

Do you think this is something that should be patched in this package? I understand if it's not and I can publish my changes under a different package.

[CGNonofr]

I was able to disable this behavior by commenting out this subscription https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/src/extension.browser.ts#L108

Do you think this is something that should be patched in this package? I understand if it's not and I can publish my changes under a different package.

Probably not. It's not a bug but a feature you don't want

[Abdallatif]

For future reference, it seems that typescript extension always override the node_modules uri here and try to always load it from a different schema. This schema is being listened to by a different service AutoInstallerFs which doesn't respect and totally ignores the existing node_modules folder and always try to download the package from the internet.

This seems like a bug in vscode web to me. Since this means we can't run vscode in offline mode or have custom node_modules.

[cemalgnlts]

I discovered that you can force it to read using declare module and including all *.d.ts files in the node_modules folder.

Screen recording 2024-03-14 12.28.56.webm

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.