Apache Cordova development lands on Visual Studio Code

Thousands of developers already use Visual Studio’s Tools for Apache Cordova—affectionately abbreviated as “TACO”—to build mobile apps for iOS, Android and Windows using a shared JavaScript codebase. Within the IDE, TACO provides everything you need to install and configure the native SDKs, preview your app, debug on emulators and devices, and even manage continuous integration/deployment via Visual Studio Team Services.

Today, we are pleased to announce new ways to build, debug and preview Cordova apps using your favorite light-weight text editor (it is your favorite, right?): VS Code and the Cordova Tools extension.

With this extension, you can debug hybrid apps, find Cordova-specific commands in the Command Palette, and use IntelliSense to browse objects, functions, and parameters. You can use it with both “stock” versions of the Apache Cordova framework and downstream frameworks like Ionic, Onsen, PhoneGap and SAP Fiori Mobile Client. Because they all use the same Cordova build systems and core runtime, the TACO extension is adaptable to the JavaScript framework of your choice.

In fact, you can even use Visual Studio Code on a project created with the full Visual Studio IDE. For example, imagine creating a Cordova project using Ionic templates with Visual Studio on a Windows machine, then opening it on an OS X or Linux machine using Visual Studio Code—making some edits—then continuing your work in the Visual Studio IDE. No matter which editor you choose, you get the full benefit of debugging, IntelliSense, and language support. How cool is that?

Debugging a Cordova app in Visual Studio Code

Visual Studio Code + Cordova Tools currently support debugging apps on emulators, simulators, and tethered devices for Android and iOS. If you ask for it (email or tweet us), Windows support will follow not too far behind. You can also attach the debugger to an app that is already running on a device; the debugger simply uses the application ID to locate the running instance.

How do I get it?

If you haven’t already, download and install Visual Studio Code for Mac, Windows or Linux from http://code.visualstudio.com. It’s under 50MB and on a decent network connection you’ll have it installed in under 2 minutes. Once that’s done, install the Cordova Tools extension directly from within the code editor. Simply invoke the Command Palette (Cmd+P on Mac, Ctrl+P on Windows), type “>ext install cordova”, and hit Enter.

Installing the Cordova Tools extension in Visual Studio Code

You guessed it…open source!

You can, of course, contribute to improving the extension further. The Cordova Tools extension is open source, so if you run into any issues or have suggestions for new features, please open an issue or better yet, make the change and send us a pull request.

And last but not the least, we have also made some improvements in our command line tools and extensions for continuous integration optimizing your inner and outer dev loops!

Send us your feedback

We invite you all to join in our journey to grow an active community of Cordova developers to build amazing apps using TACO. Tell us what you’d like to see, and whether you are interested in testing pre-release versions of TACO. You can do this by joining our insiders program, posting issues on stack overflow, or pinging me directly via e-mail at rsalva (at) microsoft.com. We look forward to hearing from you!

 

Ryan Salva

Ryan J. Salva, Principal Program Manager, Visual Studio Client Tools team
Twitter: @ryanjsalva

Ryan is a Principal Program Manager working in the Visual Studio Client Tools team where he looks after HTML, CSS and JavaScript development. He comes from a 15-year career in web standards development & advocacy as an entrepreneur, developer, and graphic designer. Today, he focuses primarily on mobile app development using web technologies and Apache Cordova.