如何在Visual Studio Code中对库使用三斜杠引用？

Question

I'm trying to get Visual Studio Code 0.3.0 to recognize my JavaScript libraries. However, intellisense is complaining. Here's a repro:

1. Open Visual Studio Code
2. File > Open Folder (select a freshly created empty folder)
3. Add a file mytest.js to that folder
4. Download jquery-2.1.4.js (full/uncompressed) to that folder (appears in the side bar)

5. Enter this in mytest.js :

    var x = jQuery('body'); 

Result: squiggly green lines under jQuery . Note that jQuery is just an example, I've had the same issue with libraries such as KnockoutJS and QUnit, etc.

I've tried adding a triple-slash reference like so:

/// <reference path="jquery-2.1.4.js" />

Heck, it even autocompleted the path for me. I've tried varying the path a bit, eg a ./ at the start, but the result is thus far invariably:

Hovering jQuery gives a popup saying:

Cannot find name 'jQuery'.
any

Still squiggly green lines. I hate squiggly lines though. How can I get rid of them?

Answer 1

You Need To Refefence the jQuery TypeScript Definition File.

---

You need a 'typings' folder in the root of your app or site. Within the 'typings' folder you need a jquery.d.ts file .

Your reference to the file should be similar to the following depending upon where the file reference is located in relation to the typings/jquery.d.ts file and folder:

/// <reference path="../../typings/jquery/jquery.d.ts"/>

Here's a TypeScript Definitions File reference for Node.js:

/// <reference path="typings/node/node.d.ts"/>

The easiest way to accomplish this is to click on the green squiggly in VSCode then click the light bulb and select Add /// reference to 'XYZ.d.ts' . This will automatically add everything you need.

In a comment above the Definitely Typed web site was referenced if you want or need to do this manually.

Answer 2

I don't know about VS Code, but regular Visual Studio often complains when you try to access "global" variables like this. I find that this pattern helps me to both avoid these warnings and keep my code more modular:

(function($) {
    var x = $('body');
})(jQuery); 

This has the added advantages of keeping your declared variables ( x , eg) scoped within the file instead of globally, and allowing you to safely use short names (eg $ ) for your libraries internally, while avoiding naming conflicts. It also opens up an easy migration path if you end up needing to use requireJS or something like that for dependency loading.

Hopefully it will also get rid of your green squigglies?