Working with SPFx projects in Visual Studio 2017 (or: how to avoid Visual Studio Code)

I like the SharePoint Framework. It’s new, it’s fast and it’s miles ahead of what we’ve had before. I even like Node.js, NPM, Yeoman and the rest of the development ecosystem that comes with it. What I don’t like though, is Microsoft’s insistence that I should use Visual Studio Code. Even the name bothers me – Visual Studio Code – what the hell, Microsoft; what did you think I was using your previous versions of Visual Studio for? Novels? Why can’t I stick to good old Visual Studio 2017 with its plethora of features and extensions?

It’s still possible to keep working in Visual Studio 2017 of course, although you won’t have the comfort of Project Templates to help you along. My solution is as follows:

  • Create an empty Class Library Project
  • Open a command window to the path of the project (not the solution)
  • Run the SPFx Yeoman Generator (yo @microsoft/sharepoint)
  • Keep working in Visual Studio 2017 stubbornly

Note: Visual Studio 2017 has some issues with React so don’t expect to be able to rely on IntelliSense to show you where the errors in your code are. I’ll update this post if I ever find a solution to this, but for the time being I’m just happy to be able to work in the IDE of my choice.

Running the project

Wouldn’t it be nice though if pressing F5 would automatically execute a ‘gulp serve’ command? Well; that’s easy to set up too.

In the Properties of your project, navigate to the Debug tab and set the Launch property to ‘Executable’.

Next, enter ‘cmd’ as your executable.

Finally, set the Application arguments to

/K gulp serve

This will tell Visual Studio to open a command window and execute gulp serve when the project is started.

The Visual Studio Project Template

Wouldn’t it be nice though if there was a pre-made Visual Studio Project template and you didn’t have to  go through all these steps to run your SPFx project? Well, there is – kind of. The SPFx Project Template Extension – which basically runs the steps outlined in this blog post but automated in the form of a project template – is very promising but doesn’t seem to be actively maintained and only works for webparts, not extensions. As such, for the time being I can’t really recommend it, but it’s a good initiative to retain the ease-of-use found in Visual Studio 2017  for SPFx projects.

Related Post

Leave a Reply

Your email address will not be published.