Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

SPFx Series 5– Important VS Code Extensions for SharePoint and Office 365 developments

Overview As a SharePoint developer, we are good in Visual Studio. But Microsoft is planning to change the SharePoint development strategies and we expect the new SharePoint Framework very soon. In my previous post, I have explained the different IDEs for TypeScript / JavaScript based development. Visual Studio Code is a cross-platform IDE, which is developed using Node.JS and Electron. Since it is a open source and cross-platform, similar to other IDEs, plenty of plug-ins are available in the VS Code Extension Market Place. VS Code Extension Marketplace Here we can find all the VS Code related extensions. https://marketplace.visualstudio.com/ Here I have listed out few important extensions for our development. Code Snippets Angular 2 TypeScript Snippets - https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2 Angular 1 TypeScript Snippets - https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular1 KnockoutJs Snippets - https://marketplace.visualstudio.com/items?itemName=furstenberg.knockoutjs jQuery Code Snippets - https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets  Gulp Snippets - https://marketplace.visualstudio.com/items?itemName=tanato.vscode-gulp Office UI Fabric Snippets - https://marketplace.visualstudio.com/items?itemName=sivarajanraju.vs-code-office-ui-fabric Linters Integrates the tslint linter for the TypeScript language into VS Code - https://marketplace.visualstudio.com/items?itemName=eg2.tslint Develop PowerShell scripts in Visual Studio Code! - https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell Integrates ESLint into VS Code - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Debuggers Debugger for Chrome - https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome Debugger for Edge - https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge Debugger for Firefox - https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug Others SharePoint Office 365 REST and JavaScript API Discovery - https://marketplace.visualstudio.com/items?itemName=SteveCurran.spremoteapi REST Client - https://marketplace.visualstudio.com/items?itemName=humao.rest-client Document This – Automatically generates detailed JSDoc comments in TypeScript and JavaScript files - https://marketplace.visualstudio.com/items?itemName=joelday.docthis Azure Resource Manager Tools - https://marketplace.visualstudio.com/items?itemName=msazurermtools.azurerm-vscode-tools Tools helping SharePoint development using VS Code https://marketplace.visualstudio.com/items?itemName=Mike.sp-tools Installing VS Code Extensions Here you can find the step by step guide for installing a new extensions from VS Code Market Place. https://code.visualstudio.com/docs/editor/extension-gallery?pub=hbenl&ext=vscode-firefox-debug How to develop and publish a new Extensions Here I have listed out few links for developing a new extensions and also how to publish. https://code.visualstudio.com/docs/extensions/overview https://code.visualstudio.com/docs/customization/userdefinedsnippets#_sharing-your-snippets-in-the-marketplace https://code.visualstudio.com/docs/tools/vscecli

SPFx Series 4 – Enabling IntelliSense for Typescript in Visual Studio Code

Overview In this post, we will see that, how to enable the IntelliSense for TypeScript. There are three ways, we can enable the IntelliSense for TypeScript. Using  ///reference – File Scope Method Using tsconfig.json Method Using typings Method Using ///reference – File Scope Method Opened Visual Studio Code with current folder AngularTS from my command prompt, C:\Samples\AugularTS> code . Created a new sub folder src under AngularTS and added two files sample1.ts and sample2.ts Now add the following code snippets in the sample1.ts file   When we try to access the Greeter class from sample2.ts, we won’t get the IntelliSense for that. Similar to JavaScript, we can enable the IntelliSense by explicitly reference the file.  See the example below.   Using tsconfig.json Method Under the root folder AngularTS, lets add a new file called, tsconfig.json and add the following code. Now we try to access the Greeter class in sample2.ts file, we can see the IntelliSense, without reference the files. Using typings Method We can follow this approach, suppose if we want to enable the IntelliSense for AngularJs or ReactJs inside our source code. First we need to install the node module typings globally https://www.npmjs.com/package/typings For enabling the TypeScript IntelliSense, lets execute the command one by one. Create a typings.json file using typings init command Install the AngularJs definition file using typings install –save –global dt~angular Now we can see that, typings.json file added under the AngularTS folder. Open the typings.json file, we can see that the installed angular definition dependencies added here. Now we can try the angular syntax, we can get the IntelliSense.           Summary For our development, mostly we will use tsconfig.json approach for internal code IntelliSense and typings approach for external modules IntelliSense like Angular, Angular Route, ReactJs.

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, ALM - http://alm.tools/ Visual Studio Code https://code.visualstudio.com/ Brackets http://brackets.io/ ATOM https://atom.io/ WebStorm https://www.jetbrains.com/webstorm/ Sublime https://www.sublimetext.com/ 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. After successful installation, Visual Studio Code Editor will be opened. You can also open the Visual Studio Code from command line. 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. 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. 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. 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. 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.