1

I manage to get perfect code completion when working with npm and ES6 modules – but how do I get code completion when I just have a single HTML with the JS included via script tag?

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
</head>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
    d3.select("body") // Unresolved variable or type d3
</script>
</body>

I tried adding D3 as a library (Project Settings > Libraries) – to no avail.

Rahel Lüthy
  • 6,837
  • 3
  • 36
  • 51

2 Answers2

1

I found this WebStorm blog post to be very helpful. In summary:

  • <script> tags are just used by the browser; they don't influence the IDE's behavior regarding code completion/navigation/error highlighting/etc.
  • Code completion/navigation/error highlighting/etc is determined by JS libraries (Preferences > Languages & Frameworks > JavaScript > Libraries)
  • These libraries can be configured manually, or can be generated via a quick fix: Using the <script src="..."></script> attribute, select the https link, and invoke "Download library". Illustrated by this screenshot presented in the blog:

enter image description here

This fixes my "Unresolved variable or type d3" problem. IntelliJ IDEA still seems to get confused about chained statements which span across multiple lines.

Rahel Lüthy
  • 6,837
  • 3
  • 36
  • 51
0

<script src="http://d3js.org/d3.v3.min.js"></script>

Make the mouse hover over "http://d3js.org/d3.v3.min.js". Click “Download library”.

……

Wait a minute, then it's OK.