CODEWITHSUNDEEP
visual-studio-codewebstorm
SERG
SERG

Reputation: 3971

Is it possible to get hints from external js lib in VSCode?

For example in html file I have <script src="https://d3js.org/d3.v6.min.js"></script> and I want to get hints like d3->csv etc.

In WebStorm it is possible by adding https://d3js.org/d3.v6.min.js to External Libraries. Is there a way to do so in VSCode?

It is in a simple HTML+JS file without npm, node etc. like:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <script>
        d3.SHOW_HINTS
    </script>
</body>
</html>

Upvotes: 5

Views: 1829

Answers (3)

Marc Stober
Marc Stober

Reputation: 10517

In 2024, I am able to get this working by putting my script in a separate JS that I included like this:

<script type="module" src="script.js"></script>

And the including a line like this at the top of that script.js file:

import "https://d3js.org/d3.v5.min.js";

Upvotes: 0

hackape
hackape

Reputation: 19957

For your d3 use case, all you need to do is:

  1. move your <script> tag content from HTML file into a standalone JS file.
  2. npm install @types/d3, like Mike Lischke has already pointed out

The result:

enter image description here

You cannot get the same kind of IntelliSense hint within the <script> tag inside a HTML file, since the official extension doesn't support it. Please refer to my answer to another question here for more details.

Upvotes: 9

Mike Lischke
Mike Lischke

Reputation: 53337

What you are after is the intellisense information, which is provided by the JS/TS language implementation. Beside the actual TS code (if provided) it uses socalled typings (or declaration) files. There are typings for many different libraries. For D3.js use npm install @types/d3 or add "@types/d3": "^5.7.2" to your dev-dependencies section in package.json and run npm install after that.

Upvotes: 2

Related Questions