Visual Studio Code: the essential extensions for working with SPFx

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:

• SPFx Debug Configuration: This extension contains the SharePoint Framework debugging configurations to debug your code in Visual Studio code.
• SPFx Snippets: SharePoint Framework Snippets.
• SPFx Localization: SharePoint Framework extension to manage localization in projects.
• SPFx Task Runner: Easily run SPFx tasks to spin up the server, package the solution and more.
• SPFx Remove Components: Easily remove components from SPFx solutions
• Rencore SPFx Script Check: Check the performance of external scripts and get snippet to include them in SharePoint Framework project.
• Rencore Deploy SPFx Package: Easily deploy a SharePoint Framework solution package to SharePoint Online.
• Rencore tenant-wide SPFx Extension deployment information: Easily add tenant-wide deployment information for your SPFx extension.

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.

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:

• SPFx Essentials
• React Components
• VSCode React Refactor
• React Playground