JQuery intellisense in Visual Studio Code

Question

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!

Answer 1

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:

For more information, check official documentation

Answer 2

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.

Answer 3

step 1 : make sure you have the definition files in your project if you got npm installed then run

npm i --save-dev @types/jquery

it will install jQuery definition file in node_modules/@types/jquery else : download it. and put it in any folder then , step:2 create a jsconfig.json file

$ touch jsconfig.json

and put this code in the jsconfig.json file

{
    "include": [
        "./node_modules/@types"
    ],
    "exclude": [
        "./node_modules"
    ]
}

that's it .

**

note : i am excluding ./node_modules in case you have it in your project if not then just include the jquery.d.ts file .

**

thanks

Answer 4

I had a little bit problem with it, so I would like to share the solution that worked for me. At first you need in project root package.json if you don't have it in console simply type:

$ npm init

this command should create a package.json with necessary content in it. Then run this command in console:

$ npm install --save @types/jquery

and like @oldbam said before use automatic type acquisition: by creating jsonconfig.json with code below:

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

Answer 5

under typings/ directory create a file called "tsd.d.ts" with the following content:

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

jsconfig.json need not contain the files attribute:

{
    "compilerOptions": {
        "target": "ES5",
    }
}

Answer 6

if you are using typings 1.x, you should use:

typings install dt~jquery --global

in typing 1.x, there's much changes .

Answer 7

You shouldn't forget to add the reference to the d.ts file in your scripts. For eg. add this reference /// <reference path="js/jquery.d.ts"/> at the top of the script you want to see the jquery suggestions as you type.