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: