CODEWITHSUNDEEP
jqueryideintellisensevisual-studio-code
ʃʈɑɲ
ʃʈɑɲ

Reputation: 2684

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!

Upvotes: 16

Views: 31691

Answers (7)

insCode
insCode

Reputation: 1255

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

Upvotes: 4

Tomz Re
Tomz Re

Reputation: 35

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"
     ]
   }
}

Upvotes: 1

Eric Clinton
Eric Clinton

Reputation: 1

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.

Upvotes: 0

Willjobs
Willjobs

Reputation: 71

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.

Upvotes: 7

oldbam
oldbam

Reputation: 2487

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

Upvotes: 25

LiangWang
LiangWang

Reputation: 8826

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

typings install dt~jquery --global

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

Upvotes: 0

bugs_cena
bugs_cena

Reputation: 494

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",
    }
}

Upvotes: 0

Related Questions