Create project from existing code | Cordova, PhoneGap, Ionic, Visual Studio

When I start a new Cordova or Ionic project I normally start from the command line. I initialize the project and add some platforms and packages I need to use in my project. I sometimes start coding from VSCode, but there will be a point where I’d like to switch to Visual Studio, the full version. Until recently I started by creating a new project and move the existing code and config files into that. That was until I came across this awesome feature in Visual Studio: “Create New Project From Existing Code Files”. I don’t know when it was added, but I somehow missed it.

Here’s how it works.

Import existing project

I assume you already have an existing piece of code you want to move over to a Visual Studio project. To get it into Visual Studio the easy way, go to File –> New in the menu and select, “Project From Existing Code…”

<!-- raw HTML omitted -->

In the dialog that appears make sure “Apache Cordova” is selected in the dropdown list and hit the “Next >” button.

<!-- raw HTML omitted -->

On the next dialog screen you have to navigate to the folder in which you Cordova project is. You also have to give your project a name. Hit “Finish” after that to close the dialog and start the creation of the project. This may take a few seconds.

<!-- raw HTML omitted -->

After the project is imported you’ll end up with a solution similar to the one in the image below.

<!-- raw HTML omitted -->

From this point on you can use Visual Studio to work on your Cordova, or Ionic, project.