Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery intellisense in Visual Studio Code

I decided to jump in Visual Studio Code to create an app.
Now I can't seem to get intellisense working for both JQuery and JQuery Mobile.

My VSC version is 0.10.1

I tried adding a reference.d.ts file with this contents

/// <reference path="js/jquery.d.ts"/>
/// <reference path="js/jquerymobile.d.ts"/>

(files downloaded from https://github.com/DefinitelyTyped/DefinitelyTyped)

I tried opening a .js file, add a $(this) and hitting ctrl+period but it says 'No suggestions'.

Something I missed?

UPDATE:

Tried adding a jsconfig.json file following https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson

{
    "files": [
        "js/jquery.d.ts",
        "js/jquerymobile.d.ts"
    ]
}

Restarted, nothing...

UPDATE 2:

added a .js file, typed $ and clicked on the lightbulb to download jquery.d.ts file. It warns me about adding this file to the jsconfig.json file. After doing all this, restarted still not working.

jsconfig.json file contents:

{
    "files": [
        "typings/jquery/jquery.d.ts"
    ]
}

Nothing!

like image 776
grmbl Avatar asked Nov 24 '15 19:11

grmbl


People also ask

Can you use jQuery in Visual Studio code?

To enable jQuery IntelliSense, we need to add a /// reference instruction to our JavaScript file. For some reasons, VS Code does not update after you type the path so if you are stuck with an error like the following, reopen the file and it should fix it.

How do I enable IntelliSense in Visual Studio code?

You can trigger IntelliSense in any editor window by typing Ctrl+Space or by typing a trigger character (such as the dot character (.) in JavaScript).

How do you autocomplete in visual code?

The suggestion list of Automatic completion appears as soon as you start typing a new identifier. The suggestion list of Basic completion appears when you press the default Visual Studio IntelliSense shortcut Ctrl+Space . If necessary, you can always return to the Visual Studio's native's IntelliSense.


2 Answers

Latest (as of April 2017) suggested approach to do this is to use automatic type acquisition by adding jsconfig.json file in the root of your project with the following contents:

{
 "typeAcquisition": {
     "include": [
         "jquery"
     ]
   }
}

Then, in your editor you will see:

jquery intellisense in Visual Studio Code

For more information, check official documentation

like image 176
oldbam Avatar answered Sep 19 '22 02:09

oldbam


If you are already familiar with npm (if not you should)

I suggest you install typings which is a typeScript definition manager that work very well with Visual Studio Code (Tested on Mac and Windows)

Simply run

npm install typings --global

Of course you must need to have npm already installed on your local pc/mac.

After that, move to the command line (terminal or cmd) and run

typings install dt~jquery --global --save

It will create the typings directory and all required files (not need to restart Visual Studio Code) and you are ready to go!.

If you want to know more about typings just follow the typings link above.

like image 44
Willjobs Avatar answered Sep 20 '22 02:09

Willjobs