The {N} plugin for WebStormIDE

I am a big fan of Jetbrains IntelliJ Platform and I think a plugin for supporting NativeScript on IntelliJ IDEA and WebStorm would be really amazing. it would bring the development to the next level.

Currently Telerik and WebStorm team don’t have specific plans for making an Intellij plugin to support NativeScript.

That’s why I recently choose to create a plugin for NativeScript for the Intellij Platform it can be used on IntellijIdea, WebStorm, PhpStorm…

Adding code assistance, project creation, plugins management, run/debug configuration support would be great addition for NativeScript developers who use this IDEs.

Intellij Platform has a great support for web development Xml, Css, Javascript, Typescript.

The NativeScript CLI lets you create, build, and deploy NativeScript-based projects on iOS and Android devices.

Combining the two tools can boost the productivity and the developper experience.

Before using any IDE or text editor to create, develop and run your NativeScript projects, make sure to follow this steps to set up NativeScript CLI for development.

Let’s look how to install the NativeScript plugin for WebstormIDE:

  1. Open the Setting dialog
  2. In the left-hand pane, select Plugins. click the the Browse repositories button.
  3. Perform a search for NativeScript and select Download and Install.
  4. Restart your IDE
Installing the NativeScript plugin for WebstormIDE

The plugin will allow you creating project from interface directly base on the templates you choose(default, typescript, angular, sample groceries…)

Select NativeScript App, choose the desired location for the project, choose the template, and click create, WebStormIDE will use the tns CLI behind the scene to create the project or download the template form the github repository.

WebStormIDE will open the project created and you can start develop with pleasure.

WebstormIDE indexing the {N} project

WebStormIDE automatically completes the names of tags, attributes and their values in XML/HTML files based on the DTD or Schema the file is associated with. NativeScript offer a schema for XML file validation, so you’ll get a basic autocompletion out of the box.

Press < and start typing the tag name. IntelliJ IDEA displays the list of tag names appropriate in the current context.

Use the ArrowUp and ArrowDown buttons to scroll through the list or you can continue typing the tag name manually to filter more the list(For example you can type sla for stack-layout or SL for StackLayout).

Press ⏎ or tab to accept selection from the list.

Completing tag names and auto-close tag

You’ll got the same live completion with the attributes of a tag, but here when it comes interested the value suggested by the IDE should be the expected by the developer.

Let’s walk through some features that offer the plugin.

Css class names completion

Inline css style completion

Color completion

JS completion

You do not only get completion but you got navigation, refactoring, find usages in your project for free.

Resources completion

You have the same similar autocompletion for angular project.

Running your Project

The plugin will create a default run configuration for you livesync on android when you are on windows or ios when you are using mac.

You can customise this configuration or add more as you like

Add new run configuration

Live template

Live template is a feature helping you to type less and be more productive easily creating and using pattern structures in your code. The plugin includes live templates for xml and angular views prefixed with ns (nslabel…)

Type CTRL(CMD)+J then ns…

Manage {N} plugins

You can manage your {N} plugins directly from the IDE

  1. Open the Setting dialog
  2. In the left-hand pane, select NativeScript. click the the + button.
  3. Perform a search for the plugin, select and Install packages.
  4. You can use -button to uninstall a plugin
  5. You can use ^ button to update a plugin
Plugins management

Hope you find the plugin and this post useful. Any feedback are welcome.