Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

SPFx Series 3 – Installing Visual Studio Code and enabling IntelliSense for JavaScript

Overview

In the last post, we saw that how to install and confgure Node.Js and NPM. Now lets see that how to install Visual Studio Code and enabling IntelliSense for both JavaScript.

JavaScript / TypeScript Editors

There are many editors are available for JavaScript / TypeScript editor. Here is a list for that,

Here you can find the editors comparisons

http://www.slant.co/topics/1686/~javascript-ides-and-editors

Installing Visual Studio Code

Visual Studio Code is a cross platform free tool from Microsoft. Lets see that how to install Visual Studio Code. Here is a link here for Visual Studio Code,

https://code.visualstudio.com/download

Run the downloaded VSCodeSetup-stable.exe file and follow the wizard with default values. Please make sure that “Add to the PATH” checkbox has checked in the Select Additional Tasks screen.

07162016 - 1

After successful installation, Visual Studio Code Editor will be opened.

You can also open the Visual Studio Code from command line.

07162016 - 2

I have created my project folder “AngularTS”. While typing “code .”, visual studio code will be opened with current directory.You can see here, current folder “AngularTS” in the left navigation.

07162016 - 3

On right click the mouse on the left navigation area, context menu will be opened. It help us to create a new folder or file, open the current explorer or command prompt.

Enabling JavaScript IntelliSense

Out of box JavaScript IntelliSense

I have created sample.js and sample1.js in the folder and created a function getAddress in sample.js. When we try to access the getAddress function, we will get the IntelliSense by out of box.

07162016 - 5

Suppose if you try to access the getAddress method in sample2.js file, we won’t get IntelliSense for that.

Explicit JavaScript IntelliSense

By explicitly reference the sample.js to sample2.js, we can get the intellisense. Lets see how to do that.

07162016 - 6

This approach is little hard for larger JavaScript application.

Implicit JavaScript IntelliSense

By adding a jsconfig.json file in the root folder, we can provide IntelliSense across the multiple JavaScript files.

07162016 - 7

Once you add the sample.js and sample1.js under files attributes in jsconfig.json file, you can get the reference in sample1.js file. This is a best approach for larger JavaScript application.

If you like to know more about jsconfig.json attributes, please follow the link, https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson

Summary

In the next post, we will see that how to install and configure TypeScript IntelliSense.

Pingbacks and trackbacks (2)+

Add comment

Loading