A Tiny VS Code Extension with Big SPFx Value
Working with SharePoint Framework (SPFx) projects can sometimes feel like juggling versions — especially if you’re maintaining multiple projects with different SPFx dependencies. What version of SPFx was that project using again? That’s exactly where SPFx Version Pal comes in.
What Is SPFx Version Pal?
SPFx Version Pal is a lightweight VS Code extension that displays the detected SharePoint Framework version of your current project right in the VS Code status bar.
While small in scope, it solves a very practical problem for SPFx developers — quickly identifying the framework version without digging through code or configuration files by hand.
Key Features
The power of SPFx Version Pal lies in its simplicity and unobtrusive integration with VS Code:
- Automatic SPFx Project Detection
It scans the workspace for SPFx-related dependencies inpackage.json— including packages like@microsoft/sp-core-library,@microsoft/sp-webpart-base, and others — to determine the SPFx version. - Version Display in the Status Bar
Once detected, the SPFx version is shown in the status bar — so you always know which version you’re working on at a glance. - Auto-Refresh on Changes
The display updates automatically when relevant parts ofpackage.jsonchange, keeping the version indicator in sync. - Manual Refresh Option
You can click the status bar item or run a command from the Command Palette (Ctrl+Shift+P/Cmd+Shift+P) to manually refresh the version detection.
How It Works
Under the hood, SPFx Version Pal does a simple – but effective – thing:
- Scan the workspace for
package.jsonfiles. - Look for SPFx dependency packages that identify an SPFx project.
- Extract the version of the detected SPFx packages.
- Display that version in the VS Code status bar — always visible and always up to date as you work.
This approach means there’s no extra configuration needed — just open a project and let the extension do its thing.
Why It Matters
In real-world SPFx development, it’s incredibly common to:
- Switch between projects targeted at different SPFx versions.
- Join a team mid-project and need quick context.
- Tackle legacy code that hasn’t been updated in a while.
Without SPFx Version Pal, you’d typically have to open and read the package.json, search for SPFx packages, and interpret version strings manually. That might only take a minute — but minutes add up, and context matters when you’re deep in development mode. SPFx Version Pal removes that friction by keeping version info right where you look most.
Who Should Use It?
This extension is perfect for:
- SharePoint developers working with SPFx projects in VS Code.
- Teams managing multiple SPFx solutions over time.
Installation & Requirements
To use SPFx Version Pal:
- You need Visual Studio Code.
- Open any SPFx project with a valid
package.json. - The extension will automatically detect and display the version in the status bar after installation.
Installation is straightforward — just install it from the VSCode extension marketplace, you can see it from the link: SPFx version pal.
Final Thoughts
SPFx Version Pal is a simple but smart productivity boost — a little helper that gives you constant visibility into your SPFx version context without having to hunt through files. It’s a great example of how focused tooling can make a developer’s routine workflow smoother and less error-prone.
Hope this helps!
I am GuidoZam 