DEV Community

Fabio Franzini
Fabio Franzini

Posted on • Originally published at Medium on

3

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:

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:

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay