Develop a Monaca Project with Visual Studio Code

Image for post
Image for post

Visual Studio Code is an open source code editor developed by Microsoft and based on Electron, a framework allows creating desktop GUI applications using the Node.js.

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.

Prerequisites

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

Installation

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 ( for Mac OS X) and the Command Palette will open. At this point, simply type and hit enter.

Image for post
Image for post

Find Cordova Tools by simply typing . Your command line should look something like this:

Image for post
Image for post

Once you hit enter, Visual Studio Code will immediately install the extension.

Project Creation

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 (or platforms/android) directory into the Monaca application’s platforms directory.

Open the Project in Visual Studio Code

Open the Monaca hybrid mobile app project in Visual Studio Code, you should be able to see your directory tree on the left side of the window. You also have the ability to set breakpoints in JavaScript files by clicking in the left margin.

Image for post
Image for post

Click on the debug icon in the sidebar or , then click on the gear icon next to the debug button in the upper left side and select Cordova.

Image for post
Image for post

We can now run our hybrid mobile apps on an iOS/Android simulator, emulator, or actual device.

Image for post
Image for post

You can also run some JavaScript directly in Visual Studio Code’s console. Here is an example of what happens when we run the following command:

alert(true);
Image for post
Image for post

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.

Image for post
Image for post

Apache Cordova development lands on Visual Studio Code | The Visual Studio Blog

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Onsen UI & Monaca Team

Written by

Team of developers from Onsen UI and Monaca

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Onsen UI & Monaca Team

Written by

Team of developers from Onsen UI and Monaca

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store