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