For the last few weeks I’ve been spending a bit of my spare time getting up to speed on a relatively new player in the mobile application space named NativeScript. NativeScript lets you write cross-platform mobile applications in TypeScript (or plain javascript if you prefer), a subset of CSS and XML files for views.

One of the struggles I have when I’m learning a new technology is that I’m very slow because I’m constantly switching to a browser to look up syntax, attributes and other language specifics before the mental “muscle memory” is formed. Good IDE support helps with this as the IDE makes suggestions that many times can let you find what you need without having to switch to a browser and look it up. Unfortunately, NativeScript is SO new that support from many today’s popular IDEs isn’t available yet.

My IDE of choice these days is WebStorm. In my view, it has simply the best javascript introspection and code assist of anything I’ve tried. Tonight I stumbled across a sort of work-around for WebStorm not having support for the “tags” used in views. As I mentioned, NativeScript uses XML to build the views used in your mobile application. In looking at the main-view.xml file created by the application create command, I noticed that the Page element had an XML namespace attribute that pointed to an XML schema (see below):

main-page.xml

main-page.xml

I put that URL into my browser and saved the XSD file to a location on my hard drive. Then in my WebStorm settings, I went to Settings > Languages and Frameworks > Schemas and DTDs and clicked on the “+” button.

project-preferences

Project Preferences

Then in the window that popped up, pasted the link to the XSD into the URI box, switched to the “Explore” tab below and browsed to the location where I’d saved the tns.xsd file and hit the OK button (see below).

add-schema

Add External Schema

Once I’d saved that, I went back to my main-page.xml file and as soon as I typed a “<“, I started getting XML tag and attribute suggestions.

main-page.xml (with tag suggestion)

main-page.xml (with tag suggestion)

main-page.xml (with attribute suggestion)

main-page.xml (with attribute suggestion)

This is a huge help to me when I’m trying to get a new technology “loaded” into my brain and become proficient with it. Many thanks to the Telerik folks for taking the time not only to create the XML schema document but make it available for developers to use!

3 thoughts on “Code Assist for NativeScript views in WebStorm

Leave a Reply

Your email address will not be published. Required fields are marked *

*