A Simple Cordova Task Runner for Visual Studio Code

i’ve been really liking visual studio code lately, so much so that it is now my primary editor. it is still definitely a pre-1.0 release, but it performs really well and i just dig its coding style. i had to step away from brackets a few weeks ago due to a bug ( details ) that impacts angularjs/ionic apps. since that’s what i work with most of the time, brackets simply became too frustrating to use. one of the cool features of visual studio code is the ability to define tasks for a project. you can support one or more different tasks for a project simply by adding a tasks.json file to the .settings subdirectory. vsc will even create a good default with lots of examples for you to modify. even nicer, since vsc supports intellisense for json schemas , you get code hints while building the file. this morning i thought i’d write up a quick example of adding support for emulating cordova app.

i began by following the suggestion in the tasks doc, i typed shift+command+p and then configure task runner , which is slightly different than what the docs say. this created the json file with an initial default task that i immediately commented out.

while you can do a lot with the cordova cli, i really spend most of my time doing cordova emulate . vsc supports multiple tasks, but you can specify just one and doing so let’s you treat it as a build command. that means you can simply type shift+command+b to execute it. here’s my first draft:

{
"version": "0.0.1",
"command": "cordova",
"isshellcommand": true,
"showoutput": "never",
"args":["emulate"]
}

notice i’m not passing a platform. if you have multiple platforms defined than all will be sent to the emulator. this will be a problem that i’ll cover in a second.

also note the showoutput command. you can specify three different values here:

• never – means what you think it does
• silent – will show output if you don’t configure problem matchers – you can see an explanation of that here: defining a problem matcher
• always – means what you think it does

however, in my testing, showoutput:never didn’t actually work. i just made the output window a bit smaller and later today i’ll file a bug report on it. on a larger screen (i.e. not this laptop) i wouldn’t even care. here it is in action.

so what if you want to specify the platform to emulate? you can define multiple tasks like so:

{
"version": "0.0.1",
"command": "cordova",
"isshellcommand": true,
"args":["emulate"
],
"tasks": [
{
"taskname": "ios",
// make this the default build command.
"isbuildcommand": true,
// show the output window only if unrecognized errors occur.
"showoutput": "silent"
},
{
"taskname": "android",
// make this the default build command.
"isbuildcommand": false,
// show the output window only if unrecognized errors occur.
"showoutput": "silent"
}

]
}

in this case, i’ve defined an ios and android task to pass to the emulate command. note that i’ve still set ios to be the build command so i can use it as a default. one thing i don’t like about this is that i can’t provide a ‘label’ for the tasks. so when i do shift+command+p, run tasks, i see it like so:

that’s not the end of the world, but i’d like to have a label so i could see “emulate ios” and “emulate android (please wait 2-3 hours for the emulator to start)”.

this works , but has a problem. when emulating android, the cli hangs while the emulator is running. if i run android via vsc, it works (after the emulator finally loads up), but vsc will not let me run another tasks until this one ends. i have to kill the emulator to continue.

ok, so i worked on this a bit more. i don’t actually emulate android as it is way too slow, what i do normally is use genymotion and use the run command instead. yes, this is still emulating, but the command line call is tweaked. i just tried this and it worked!

{
"version": "0.0.1",
"command": "cordova",
"isshellcommand": true,
"args":[
],
"tasks": [
{
"taskname": "ios",
// make this the default build command.
"isbuildcommand": true,
// show the output window only if unrecognized errors occur.
"showoutput": "silent",
"args": [
"emulate"
]
},
{
"taskname": "android",
// make this the default build command.
"isbuildcommand": false,
// show the output window only if unrecognized errors occur.
"showoutput": "silent",
"args": [
"run"
]
}

]
}

so i can now shift+command+b to send to ios as my default, or do shift+command+p, run task, to select android if i need to.

hope this helps, and i’m going to keep an eye out for other ways to help vsc work with cordova.