CODEWITHSUNDEEP
jqueryvisual-studio-code
user2232552
user2232552

Reputation: 152

visual studio code jquery suggestion

Is there a way to get VSC to auto suggest various functions within jquery? does the main Jquery js file need to be linked to the software somehow?

As an example I started typing this 

$('#test').app

and it suggests append?

Upvotes: 11

Views: 10800

Answers (3)

mercury233
mercury233

Reputation: 61

If you are using npm, you can

npm install @types/jquery --save-dev

and add

/// <reference types="jquery" />

to your js file.

Ref: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-

Upvotes: 0

Martin Schneider
Martin Schneider

Reputation: 15388

via npm (Node.js)

  1. Open the terminal (Ctrl + `).
  2. npm install @types/jquery --save.

by hand (without Node.js installed)

  1. Create node_modules\@types\jquery\ folder structure within your project folder (if not exist). *
  2. Get latest jQuery type definitions file from GitHub
  • Click "Raw".
  • Ctrl + S (File > Save).
  1. Save it to your node_modules\@types\jquery\ folder as index.d.ts.
  2. Done. You maybe need to reopen your *.js file or VS Code.

Note
You can also place the file anywhere else and name it differently. But if you do so, you will also need to reference it in every *.js file where you want to use jQuery code suggestions:

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

*the node_modules folder is recognized by VS Code for this because it "comes with built-in support for JavaScript, TypeScript and Node.js", but to go the way of first solution you have to install Node.js runtime.

Upvotes: 11

Alex Dima
Alex Dima

Reputation: 23009

Try using $ in a .js file. If you move your cursor near the warning, a light-bulb will appear. Either with Ctrl+. or by clicking on it, a code action will be proposed that will download and add a /// reference to jquery.d.ts that will give you all the nice IntelliSense for jQuery

Code action on $

Upvotes: 16

Related Questions