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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay