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:

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay