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

Add comment

Loading