1

I'm just starting out with js development. Following the instructions of a course on udemy: https://www.udemy.com/course/understand-javascript

(Course Using ES5, my Browser - FireFox 72.0.1 (64-Bit) - understands ES6 already)

The instructor uses brackets and showed some basic functions of the underscore.js library. I downloaded the development version and put it into a subfolder on my project setup:

workspace setup

I included it in my app in app.js as follows:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="libs/underscore.js"></script>
    <script src="app.js"></script>
</head>
<body>
</body>
</html>

When the instructor uses the . operator on the _ object, Brackets shows him the available functions. When I tried this first in VS Code IntelliSense (the autocompletion plugin of VS Code I suppose) did not make any suggestions.

I googled around and came up with the creation of a "jsconfig.json" at the root of my project and restarted VS Code.

    {
    "compilerOptions": {
      "module": "commonJS",
      "target": "es6"
    },
    "exclude": ["node_modules"]
  }

Now, when I write "_." VS code automatically adds the following line to my script:

import { _ } from "./libs/underscore";

If I run the script now, it says

SyntaxError: import declarations may only appear at top level of a module

on the Firefox console.

My Question:

What do I have to consider when setting up javascript module (I guess modules are singe js files?) dependencies to have autocompletion in VS Code working?

Do I have to use "import" or "require"? Do I have to put the imports in the jsconfig.json? I'm also pretty confused by this post:

How do I include a JavaScript file in another JavaScript file?

I really just need the essentials of setting up a simple vanilla js project.

Related posts:

How to extend VSCode code completion with a third-party JavaScript library

https://github.com/Microsoft/vscode/issues/16102

Thank you in advance.

Manuel Waltschek
  • 515
  • 1
  • 6
  • 23

1 Answers1

1

So what I assumed first, was that vs code can resolve third party library includes from index.html

Seems that this is not the case. I worked around by installing the library via npm. Now the Intellisense auto completion works.

This does not answer, why VS Code adds an import statement why this leads to the exception mentioned in my original post.

Maybe I asked too many questions at once / too general about referencing js files, thus, resulting in a downvote without any comment how to improve the question.

Manuel Waltschek
  • 515
  • 1
  • 6
  • 23
  • just restructure the question to make this answer the answer to your question. – Zaffer Apr 12 '22 at 17:14
  • "Import through index.html" is implicit. This is bad for your code organization and VS Code indirectly hinting about it. – AnrDaemon Sep 26 '22 at 10:30