SharePoint Framework Toolkit for Visual Studio CodeSharePoint Framework Toolkit is a Visual Studio Code extension that aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code. With SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com. Capabilities | Architecture | Wiki | Contributing | Support | Code of Conduct | Changelog | Sharing is Caring | Additional resources ⭐ CapabilitiesThe extension provides the following capabilities: 1️⃣ Welcome experienceThe extension automatically detects if you have a SharePoint Framework project opened. If not, it will start with a welcome experience that will guide you through the process of creating a new project and validating your local environment. Directly from this view, you may create a new project from scratch or from an existing web part, extension or ACE sample, or ACE scenario. It is also possible to open an already existing project using Open folder button. Last but not least it is possible to check your local workspace for the needed global dependencies to develop the SPFx solutions, like the correct Node version, gulp, yeoman etc., and install them if needed with a single click. When running the extension for the first time it will present you a walkthrough that will give you a step-by-step guide to get started with SharePoint Framework development and will go over the main functionalities of SharePoint Framework (SPFx) Toolkit. Check out our docs for more details 2️⃣ Set up your development environmentTo ensure that you can develop SPFx solutions, you may use the check dependencies functionality. This action will check if you have the required dependencies such as:
In case you do not have all dependencies installed, or some are incorrect version, you can use the install dependencies action to install them.
Check out our docs for more details 3️⃣ Don't Start from scratch. Reuse an SPFx web part or extension or ACE sampleYou may kick-start your development with a new project based on an existing ACE or SPFx web part or extension with a click of a button. All of the provided samples are powered by PnP Samples repositories. The extension provides a set of filters to help you find the right sample for your needs. You may search by: author, title, description, SPFx version, and component type. It is also possible browse sample details view directly from VS Code checking all sample details before you create a new project. Switch between the list and grid view and don't worry about the size of your VS Code as it is fully responsive. Check out how easy it is to create a new project based on a existing sample 👇. Check out our docs for more details 4️⃣ Start from an ACE scenarioStart your solution based on the provided set of ACE scenarios with ready-to-use code to showcase what's possible. Scenarios are provided with detailed guidance using the Code Tour to provide you with more details on the structure and options. 5️⃣ Create a new projectCreating a new project was never easier. Just use the create a new project action, and the extension will guide you through the process with a dedicated scaffolding form. Check it out in action 👇. It's possible to scaffold any kind of SPFx project. Install additional dependencies with a single click straight from the scaffolding form. Currently we support installing PnP reusable property pane controls, PnP reusable React controls, and PnPjs. Check out our docs for more details 6️⃣ Sign in to your tenant & retrieve environment detailsThe extension allows you to sign in to your Microsoft 365 tenant using CLI for Microsoft 365. SPFx Toolkit needs and Entra App Registration to be able to sign in to your tenant. You may either use an existing app registration or create a new one with a single click using a dedicated form. SPFx Toolkit will guide you through the process of creating a new app registration either manually by providing step-by-step guidance or automatically by creating the app registration for you. If you already have an Entra App Registration you may use it to sign in to your tenant by providing the Client Id and Tenant Id. Thanks to that the extension will retrieve helpful URLs from your tenant like link to:
Additionally, the extension will check and retrieve tenant service health incidents that are currently happening in your tenant so that you gain quick insights on your tenant health. After successful sign in an additional view is presented that shows list links to app catalogs available in the tenant, both tenant-level and all site-level app catalogs. Additionally it will show you all tenant-wide extensions installed on your tenant with. Using the extension settings you may choose show or hide the tenant-wide extensions list and tenant health incidents list. Sign-in is also required for some actions to work properly like the deploy action which allows you to upload of the .sppkg file to the tenant or site-level App Catalog. Check out our docs for more details 7️⃣ Gulp tasksThe extension shows all possible Gulp tasks one may run on an SPFx project. The tasks allow you to clean, bundle, package, serve the project with a single click. Check out our docs for more details 8️⃣ ActionsThe actions section allows unique functionalities that may significantly boost productivity when working with SPFx projects. Currently the extension allows you to:
Check it out in action for GitHub👇 And for Azure DevOps👇 Check out our docs for more details
Check out our docs for more details
Check out our docs for more details
Check out our docs for more details
Check out our docs for more details
Check out our docs for more details
Check out our docs for more details
Check out our docs for more details 9️⃣ Help and feedback sectionThe help and feedback section is a group of links that will direct you to the right Microsoft documentation and learning paths. It also contains links to additional tooling that may be helpful in your development process as well as links to connect with the Microsoft 365 and Power Platform Community. Check out our docs for more details 1️⃣0️⃣ Coding SnippetsThe SharePoint Framework Toolkit comes together as a bundle with two other extensions. One of them is SPFx Snippets created by Elit Struyf. It contains snippets for working in:
In order to start using it simply start typing from Check out the extension details to find out more Check it out in action 👇 1️⃣1️⃣ Teams Toolkit IntegrationTeams Toolkit is a widely used VS Code extension that aims to help you develop solutions that will allow you to extend Microsoft Teams. SharePoint Framework Toolkit aims to boost your productivity in SharePoint Framework solutions that may be used to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook, and Microsoft365.com. Among many awesome functionalities, Teams Toolkit allows you to create a project to extend Teams Tab with SPFx project, and that’s where both of those extensions may cooperate. Check out our docs for more details 1️⃣2️⃣ Node.js Version Manager SupportBy default, the SharePoint Framework Toolkit will use the Node.js version that is installed on your machine. If you want to use a different version, you can use a Node.js Version Manager such as nvm or nvs. The SharePoint Framework Toolkit will detect the preferred version of Node.js if a You can use the settings to change which Node.js version manager you want to use. You may choose between 1️⃣3️⃣ SPFx Toolkit GitHub Chat ParticipantNow you may use SPFx Toolkit as a chat participant in GitHub Copilot chat extension. Simply, mention @spfx in the chat to ask dedicated questions regarding SharePoint Framework development. @spfx is your dedicated AI Copilot that will help you with anything that is needed to develop your SharePoint Framework project. It has predefined commands that are tailored toward a specific activity for which you require guidance. Currently, we support the following commands:
Check out our docs for more details ⚙️ ArchitectureSharePoint Framework Toolkit for Visual Studio Code is an abstraction layer on top of the SPFx Yeoman generator and CLI for Microsoft 365. This means that the features and capabilities provided through this tool are available for any solution which has been built with SPFx. 📚 WikiFor more information on how to use the extension, please refer to the wiki. 👩💻 ContributingThis project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to grant us the right to use your contribution. For details, visit https://cla.microsoft.com. When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA. If you have ideas for new features or feedback, let us know by creating an issue in the issues list. Before you submit a PR with your improvements, please review our contributing guide. 🙋 SupportThis project is a community lead extension provided by the Microsoft 365 and Power Platform Community members. Microsoft employees are closely involved in this work, but the solution is provided under the community brand without direct supportability channels from Microsoft. 👍 CommunityAre you building experiences for Microsoft 365? - Everyone is welcome to join our Microsoft 365 and Power Platform Community efforts with community calls, samples and guidance. Join our weekly community calls for Microsoft 365 and Power Platform topics or engage with us on Discord. Everyone is welcome 🧡 🧾 Code of ConductThis project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments. 📄 ChangelogSee the changelog for the latest changes. 😍 "Sharing is Caring"🔍 Additional resources
⚠️ DisclaimerTHIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT. |