Visual Studio Code: the essential extensions for working with SPFx
Tags: spfx, visualstudiocode, microsoftteams, sharepointdevelopment
Published: 2019-07-17 12:43:29

---
title: Visual Studio Code: the essential extensions for working with SPFx
published: true
tags: spfx,visual-studio-code,microsoft-teams,sharepoint-development
canonical_url: https://medium.com/@fabiofranzini/visual-studio-code-the-essential-extensions-for-working-with-spfx-dd5082ab6d41
---

![](https://cdn-images-1.medium.com/max/1024/1*jOKgv122g-F58nVkK3Ol1A.png)

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](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-debug): This extension contains the SharePoint Framework debugging configurations to debug your code in Visual Studio code.
- [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets): SharePoint Framework Snippets.
- [SPFx Localization](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-spfx-localization): SharePoint Framework extension to manage localization in projects.
- [SPFx Task Runner](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-spfx-task-runner): Easily run SPFx tasks to spin up the server, package the solution and more.
- [SPFx Remove Components](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-spfx-remove-components): Easily remove components from SPFx solutions
- [Rencore SPFx Script Check](https://marketplace.visualstudio.com/items?itemName=RencoreGmbH.vscode-spfx-script-check): Check the performance of external scripts and get snippet to include them in SharePoint Framework project.
- [Rencore Deploy SPFx Package](https://marketplace.visualstudio.com/items?itemName=RencoreGmbH.vscode-spfx-deploy-package): Easily deploy a SharePoint Framework solution package to SharePoint Online.
- [Rencore tenant-wide SPFx Extension deployment information](https://marketplace.visualstudio.com/items?itemName=RencoreGmbH.rencore-tenant-wide-spfx-extension-deployment): Easily add tenant-wide deployment information for your SPFx extension.

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

- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense): Visual Studio Code plugin that autocompletes npm modules in import statements.
- [JSON to TS](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts) : Converts JSON objects to TypeScript interfaces. This will save you a lot of time creating new interfaces.
- [React Components](https://marketplace.visualstudio.com/items?itemName=dericcain.react-components): React Components saves you time be scaffolding out your React Components.
- [VSCode React Refactor](https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor): This simple extension provides refactor code actions for React developers.
- [React Playground](https://marketplace.visualstudio.com/items?itemName=wmira.react-playground-vscode): This plugin helps in automatically providing a webview playground of your React Component.

![](https://cdn-images-1.medium.com/max/128/0*GKll4wbQCx2CGSTY)<figcaption>SPFx Essentials</figcaption>

Some of these extensions are directly packaged inside a single extension called “[SPFx Essentials](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-essentials)” created by one of the authors of these extensions, the legendary [Elio Struyf](https://twitter.com/eliostruyf) 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](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-essentials)
- [React Components](https://marketplace.visualstudio.com/items?itemName=dericcain.react-components)
- [VSCode React Refactor](https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor)
- [React Playground](https://marketplace.visualstudio.com/items?itemName=wmira.react-playground-vscode)