loading...

Visual Studio Code: the essential extensions for working with SPFx

fabiofranzini profile image Fabio Franzini Originally published at Medium on ・3 min read

When we work with SPFx (SharePoint Framework) the code editor we are going to use is almost exclusively Visual Studio Code.

For those not familiar, Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS with an Open Source license and based on Electron. This editor includes support for debugging, a control for integrated Git, Syntax highlighting, IntelliSense, Snippet and code refactoring.

In this post I want to collect the extensions that should never miss Visual Studio Code for development with SPFx.

And here are the ones I recommend:

Other extensions not directly related to SPFx but very useful are:

  • npm Intellisense: Visual Studio Code plugin that autocompletes npm modules in import statements.
  • JSON to TS : Converts JSON objects to TypeScript interfaces. This will save you a lot of time creating new interfaces.
  • React Components: React Components saves you time be scaffolding out your React Components.
  • VSCode React Refactor: This simple extension provides refactor code actions for React developers.
  • React Playground: This plugin helps in automatically providing a webview playground of your React Component.

SPFx Essentials

Some of these extensions are directly packaged inside a single extension called “SPFx Essentials” created by one of the authors of these extensions, the legendary Elio Struyf whom I thank personally since these extensions have helped me and help me daily in the development with SPFx.

In summary, the extensions to install that I recommend are:

Posted on by:

fabiofranzini profile

Fabio Franzini

@fabiofranzini

Office Development & Business Application MVP, One of Top 25 SharePoint Influencers in Europe for 2018 and Microsoft Web Stack lover. Senior Consultant, Software Engineer & Trainer.

Discussion

markdown guide