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

user_563047 0
Viewed 648

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>
visual-studio-code webstorm
2 Answers

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.

user_36173800

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.

user_11371740
Related