Develop a Monaca Project with Visual Studio Code
Visual Studio Code comes with tons of features like debugging, Git integration, syntax highlighting, IntelliSense and more. It is also highly customizable. On top of that, Microsoft recently announced Cordova Tools for Visual Studio Code. With Cordova Tools extension, you can build, debug and preview Cordova hybrid mobile apps on Visual Studio Code.
With that in mind, in this blog post, we will quickly explain how to create a Monaca hybrid application using Microsoft’s Visual Studio Code with Cordova Tools.
First of all, make sure you have Node.js installed on your device, then install Cordova using the following command:
npm install -g cordova
If you are targeting iOS devices, install the libraries using Homebrew. Note that iOS debugging is not supported in Windows.
brew install ideviceinstaller ios-webkit-debug-proxy
If you don’t have Visual Studio Code, download it from here. Once installed, start it up and install Cordova Tools extension. In order to do that, press
CMD+SHIFT+P for Mac OS X) and the Command Palette will open. At this point, simply type
Install Extension and hit enter.
Find Cordova Tools by simply typing
cordova. Your command line should look something like this:
Once you hit enter, Visual Studio Code will immediately install the extension.
In this tutorial, we will be using Monaca LocalKit. First of all, create a new Monaca project based on the desired template, then copy the previously created Cordova project’s
platforms/ios (or platforms/android) directory into the Monaca application’s platforms directory.
Open the Project in Visual Studio Code
Click on the debug icon in the sidebar or
CMD+SHIFT+D, then click on the gear icon next to the debug button in the upper left side and select Cordova.
We can now run our hybrid mobile apps on an iOS/Android simulator, emulator, or actual device.
Features of Visual Studio Code
Today, we have quickly gone through how to create Monaca hybrid mobile apps using Visual Studio Code. As previously mentioned, Visual Studio Code provides varieties of features out of the box, just keep in mind that a stable version has just been released so you still may encounter some minor bugs. However, Built-in support for Git and debugging tools are great. Also, IntelliSense, snippets, code refactoring, and Extensions will surely increase your productivity. It can be definitely considered a powerful and reliable tool to create Monaca and Cordova applications.