The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

There’s been a lot of well-deserved buzz around VSCode, Microsoft’s new lightweight editor. VSCode is becoming a solid choice as an editor for numerous reasons.

  • It’s cross platform: Mac, Windows, and Linux
  • It’s built on web technologies: Uses Electron as its core
  • It’s hackable: You can build extensions using JS/TS
  • It’s lightweight: Fast startup time; nice and snappy

If you’re using any other lightweight editors, you might want to consider VS Code, too. It has a lot of great defaults set up for web development. On top of all that, it’s free and open source!

Screen Shot 2016-02-25 at 10.55.50 AM (2)

One feature in particular that has blown me away is the Cordova extension that has been released.

This extension provides two big features: code IntelliSense for all the raw Cordova plugin APIs, and debugging capabilities.

IntelliSense

Normally, JavaScript code hinting tools tend to be hit or miss. They work really well when using the raw DOM API, but if you try to use a library or a set of plugins, the code hints break. They don’t know about those additional APIs, so they can’t provide any meaningful feedback. This is where the first feature of the Cordova extension really helps.

Behind the scenes, when you open a project in VSCode, the extension will check to see what Cordova plugins you have installed for your project. From there, it will fetch the proper type definition files. You may be thinking, “But I thought type definition files were for Typescript only?”, and you’d be partially correct.

VSCode can use those type definition files to analyze your JavaScript and provide meaningful hints about the APIs.

vscode-hint
This is great for those who don’t necessarily want to use TypeScript but still want code hinting for the plugins.

Debugging

It used to be tricky to debug a Cordova app. While you could debug most of your app in the browser, debugging native plugin calls required the code to be on a physical device, and then you had to attach either the Chrome or Safari devtools. This could mean you missed logs or warnings that got fired, or you had to figure out how to reload the app and attach breakpoints.

Enter VSCode’s debugger!

The debugger in VSCode is a full featured devtools debugger right inside your editor. It also allows you to deploy to both a simulator or physical device, or attach to an already running process.

vscode-debug-export

But by far the most powerful feature of this is that as you write your code, you can set breakpoints inside your editor and have those breakpoints work on your device without any issues.

This is huge! Now we can enjoy the experience of developing and debugging our hybrid apps.

This works not only with pure Cordova projects, but with Ionic projects, too. Pair that with VSCode’s excellent Angular code IntelliSense, and you have a development experience like no other. I encourage everyone to give VSCode a try and test out the extension.

  • Paul Pacurar

    VSCode is nice. I’ll start using it when they implement tabs

    • Mike Hartington

      Indeed, it is a feature I’ve been missing as well. Hopefully they’ll add it soon!

      • http://nicholls.azurewebsites.net/ Juan David Nicholls

        see my template to debug with Visual Studio Code 😀

    • http://nicholls.azurewebsites.net/ Juan David Nicholls

      yes, the tabs are very important. But VSCode is very useful to work with Node.js 😛

    • Edward Bishop

      They did this now. I hate tabs so it’s not for me but you’ll be happy 🙂

  • 谢森正一

    i got an error [cordova-debug-adapter] Error: Cannot connect to the target: read ECONNRESET and when i type debugger in my code it didn’t work

  • Indy Lawi

    Thanks for the tip.
    Have you tried the same feature with Ionic 2 + Angular 2 & TypeScript?
    How do I debug an Ionic 2 app (TypeScript based) in VS Code?
    Any suggestion or tip?

  • Neil Young

    Would be great, but as long as you cannot “really” debug ts code, it is just ok.

  • manoj meshram

    Unable to find ideviceinstaller. Please ensure it is in your PATH and re-open Visual Studio Code

    i am getting above issue on mac please help me

  • Kyle Roach

    @mhartington:disqus Does this work for ionic 2 as well?