5 must have extensions when working with SharePoint framework (SPfx)
Tags: spfx, extensions, vscode
Published: 2021-06-30 11:20:53

<!-- wp:paragraph -->
<p>I have<a href="https://dev.to/elischei/my-top-5-favorite-vscode-extensions-203d" title="My top 5 favorite VSCode extensions" target="_blank" rel="noreferrer noopener"> previosly written a blogpost about my favorite extensions for VSCode</a>. Today I want to share my favorite SPfx-specific extensions and tools. If you know about some extension, tool or package that should be on this list let me know! </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>1. <a href="https://github.com/s-KaiNet/spfx-fast-serve" target="_blank" rel="noreferrer noopener" title="https://github.com/s-KaiNet/spfx-fast-serve">SPfx fast-serve </a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Do you feel like it takes forever to serve your project on the local server? And that the hot reaload is not exactly hot? Then you should try SPfx fast serve! <a href="https://www.linkedin.com/pulse/enjoy-sharepoint-framework-development-denis-molodtsov/" target="_blank" rel="noreferrer noopener" title="https://www.linkedin.com/pulse/enjoy-sharepoint-framework-development-denis-molodtsov/">This article describes it in more detail and also covers the setup</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>2. <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets" target="_blank" rel="noreferrer noopener" title="https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets">SPfx snippets </a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A nice little collection of snippets so you don't have to write everything from scratch. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>3. <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-debug" target="_blank" rel="noreferrer noopener" title="https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-debug">SPfx debug extension</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For easier debugging. This is by the same creator as SPfx snippets, Elio Struyf ( @estruyf ) , <a href="https://marketplace.visualstudio.com/publishers/eliostruyf" target="_blank" rel="noreferrer noopener" title="https://marketplace.visualstudio.com/publishers/eliostruyf">you should check out all of his extensions for SPfx and MS graph</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>4. <a href="https://marketplace.visualstudio.com/items?itemName=RencoreGmbH.vscode-spfx-deploy-package" target="_blank" rel="noreferrer noopener" title="https://marketplace.visualstudio.com/items?itemName=RencoreGmbH.vscode-spfx-deploy-package">Rencore Deploy packages extension</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I usally prefer to <a href="https://elischei.com/deploy-your-spfx-solution-using-pnp-powershell/" target="_blank" rel="noreferrer noopener" title="How to deploy your SPfx solution using PnP powershell">deploy my spfx apps using pnp powershell,</a> but if you want to do it directly from VSCode this extension is for you. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>5. <a href="https://dev.to/elischei/how-to-use-node-version-manager-nvm-for-windows-to-handle-different-node-versions-5a35" target="_blank" rel="noreferrer noopener" title="https://elischei.com/how-to-use-nvm-for-windows/">Use NVM to switch between node versions</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you work with multiple apps that have different node dependencies Node Version Manager (NVM) is a must. I have previously <a href="https://dev.to/elischei/how-to-use-node-version-manager-nvm-for-windows-to-handle-different-node-versions-5a35" target="_blank" rel="noreferrer noopener" title="How to use node version manager (nvm for windows) to handle different node-versions">written a blogpost on how to setup and use NVM (for windows)</a>. </p>
<!-- /wp:paragraph -->

***
<!-- wp:paragraph -->
<p>Did you find this article usefull?&nbsp;<a href="https://twitter.com/acupof_dev" target="_blank" rel="noreferrer noopener">Follow me on twitter</a>&nbsp;to be notified when I publish something new!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also, if you have any feedback or questions, please let me know in the comments below.&nbsp;:) </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thank you for reading, and happy coding!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>/Eli</p>
<!-- /wp:paragraph -->