javascriptvisual-studio-codeintellisensejavascript-intellisense

How do I make IntelliSense in VSCode show completion from other files?


Background:

I wrote a game in Swift. Now I want to translate the game logic (the model) part to JS so that I can write another version of the game which can be played in a browser. Since Swift and JS are so different, I first translated the game to C#, then used Bridge.NET to translate the C# code to JS. Now, I want to write the UI code using the p5.js library, in JS. (Bridge.NET does not support p5.js, so I can't write the UI code in C#)

So basically, I will have an HTML file referring to a JS file containing some p5.js code, and the JS files outputted by Bridge.NET. In the UI code, I need to call some game logic code, which is in the Bridge.NET output files.

According to the Bridge.NET docs, I can call code from the output files just like normal JS, as long as I include all the output files with <script> tags.

However, VSCode, which I'm using to code all of this, does not show IntelliSense for the Bridge.NET output files, nor does it show IntelliSense for p5.js classes and members.

This is my HTML file:

<html>
  <head>
    <meta charset="utf-8" />
    <!-- These are p5.js files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script src="scripts/sketch.js"></script> <!-- This is the file containing UI code -->
    <!-- The below are the bridge output files -->
    <script src="scripts/bridge.js"></script>
    <script src="scripts/bridge.console.js"></script>
    <script src="scripts/bridge.meta.js"></script>
    <script src="scripts/MyGame.js"></script>
    <script src="scripts/MyGame.meta.js"></script>
    <script>
    // I should be able to see IntelliSense for all my classes in the line below, but I can't.
    MyGame.
    </script>
  </body>
</html>

I have read somewhere that VSCode only supports IntelliSense for code in the same file. I read somewhere else that I need to add a jsconfig.json, so I added something like this:

{
    "compilerOptions": {
        "target": "ES6"
    }
}

but nothing changes.

There are lots of posts on SO about enabling IntelliSense on VSCode, but they are all about using npm and node, but I am just trying to get IntelliSense for client side code, so I'm not using either of those.

How do I enable IntelliSense for stuff declared in files linked with <script>?


Solution

  • Auto completion works based on typescript type declaration files - .d.ts. Most libraries already have those files available as npm packages but it doesn't apper to be the case of p5. Search in the files generated by your tool if some of these were created like MyGame.d.ts.If they were, you could add in the script you are writting a reference to it:

    ///<reference path=" put the filename with path here "/>