1. Visual Studio Code Js
2. Visual Studio Code Install Jquery

Before starting

If you really just want to execute the steps without any explanation, try to jump right to the Conclusion section.

Visual Studio Code includes built-in JavaScript IntelliSense, debugging, formatting, code navigation, refactorings, and many other advanced language features. Most of these features just work out of the box, while some may require basic configuration to get the best experience. This page summarizes the JavaScript features that VS Code ships with. If you are building a TypeScript project in Visual Studio Code you will get intellisense and that is cool. But if you want to add jQuery into your ts file the intellisense shows you errors. So how to use it? All you need to do are some simple steps. Create the folders structur typings/jquery in your project folder. Visual Studio Code (VS Code) is undoubtedly the most popular, lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. The following steps illustrate how to download and install the Syncfusion Blazor Template Studio with the Code Generator extension from the Visual Studio Marketplace. Note: Syncfusion Blazor Code Generator was shipped within the Syncfusion Template Studio. Download the Syncfusion Blazor Template Studio from the Visual Studio Marketplace. Debugging jQuery code in Visual Studio Debugging is inevitable for resolving bugs in the code during the development phase. Sometimes, bugs also slip into production. Visual Studio provides support for developers to debug the JavaScript code in the same manner as the server-side code.

That being said, you can always read the parts that you are not sure about later :)

Prerequisites

Before going further, you will need node.js and npm. If you don’t know what those are, lets just say that npm is a package manager and it requires Node. We will use npm from within VS Code (in command line), to help us install our jQuery “IntelliSense” definition file.

1. NPM is packaged with Node, so no more action are required here :)

Install Node and NPM and make sure the path is added to you PATH environment variable. This way, you will be able to get access to node and npm from everywhere without typing the file path every time. Which will become really useful really fast, I am telling you.

If I remember well, during the installation process, the installer will prompt you about that. But its been a while since I installed Node, so I might be wrong here.

After the installation, open a console (cmd for Windows users) and type npm. If this does not work, look at the following link: fixing npm path in Windows 8. For other Windows versions this will be pretty similar. For other OS, I really don’t know - Google is your friend tho… sry

jQuery IntelliSense

The project directory

Now that Node.js and NPM are installed, lets create a Visual Studio Code folder. I created my project there at F:ReposBlogPostjquery-intellisense.

Here is my project structure:

In my index.html file I used the Bootstrap 3 Snippets extension to create the basic layout (bs3-template:html5 snippet). I changed the linked jQuery file to the version 3.1.0 and I also included the integrity and crossorigin attributes to my script tag.

Here is the full index.html file:

Visual Studio Code Js

jQuery TypeScript type definitions

Now, you might think the following:

Why is the title saying JavaScript but now you talk about TypeScript ?

We will use a TypeScript type definitions file in JavaScript.

If you don’t know TypeScript, this is also a nice topic to look into. But lets keep this for another day…

Installing TSD globally

Lets install the npm package named TSD globally, by typing the following command:

Open a console (a VS Code terminal, a cmd for Windows users, etc.), it doesn’t really matter since we are installing the package globally.

Installing the jQuery TypeScript type definitions file

Visual Studio Code Install Jquery

Once this is done, open a new console (or use the same one), but this time, make sure that you are in your project folder.

Type the following command:

This will install the TypeScript type definitions file we are looking for.

Your project structure should now look like this:

Use the definition file(s)

Lets open our app.js file. If you type $ there is still nothing. 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 pathso if you are stuck with an error like the following, reopen the file and it should fix it.

Here is the copyable snippet:

This basically told VS Code to append the type definitions contained in our tsd.d.ts file to its actual IntelliSense.

If you open the tsd.d.ts file you will see a reference to jquery/jquery.d.ts which is our jQuery type definitions file (the file we “installed” earlier). So, by linking the tsd.d.ts in our JavaScript files, it allows us to include all our loaded type definitions files at once (we only have jQuery for now, but who knows the future ;) ).

Back to our app.js file, we now have full jQuery IntelliSense:

What to do in your next project

Now that we have everything setup and working, the only thing you need to do in your next project is to Install the jQuery TypeScript type definitions file and reference it in your JavaScript files, as explained in the Use the definition file(s) section.

So the command you want to remember is this one:

And this one:

Note that the value of the path attribute must match your tsd.d.ts file location, so you might need to adjust it.

Conclusion

It was pretty strait forward, assuming you already had Node.js and npm installed, we did the following:

1. Create a folder and add some file in it (or open an existing one)
2. Install TSD globally using the following command: npm install tsd -g
3. Install the jQuery type definitions file in our project using the following command: tsd install jquery --save
4. Add a reference to our tsd.d.ts file in our app.jsfile (or the file you want jQuery IntelliSense in) using the following triple-slash comment: /// <reference path='../typings/tsd.d.ts' />

… And voilà!

Happy coding!

Buy My Book Amazon.com (associate link)

Buy My Book Amazon.ca (associate link)

You liked the article
and think I deserve a
little something?