Complete All The Things! A Guide to Code Completion in Sencha IDE Plugins

via Imgflip GIF Generator

In 2015, my team developed plugins for three of the most popular IDEs: Eclipse, Visual Studio, and the JetBrains product line (IntelliJ, WebStorm, RubyMine, PhpStorm, and PyCharm). Ext JS is a vast, feature-rich library that encompasses the “full stack” of front-end development: MVC/MVVM, charting, data, and animations. As a developer, one of biggest challenges when working with any framework that has a lot to offer is wrapping your head around the full extent of what’s available. A great IDE can make a large framework seem small and manageable by offering helpful suggestions as you type. We want our users to feel that the full scope of Ext JS is always at their fingertips, so we made code completion a top priority when developing our plugins.

Code completion in Sencha IDE plugins goes far beyond what you might expect from JavaScript IDEs because we believe Ext JS is one of the best javascript libraries. Here are a few of the highlights:

All of the screenshots below are from Visual Studio 2015.

Does it handle Class Names?

Even within strings, you can start typing any Ext JS class or namespace and see matching results:

What about Configs?

Ext JS components are extremely flexible. Each class has a wealth of configuration options. Type ctrl-space in a config block, and you’ll see all of the relevant configs for the class you’re working with:

Does it handle Properties and Methods?

Once you’ve instantiated a component, the plugin will suggest all of that component’s properties and methods:

What about Events?

Type ctrl-space in any listeners object or in the first parameter to .on, .mon, .un, or .mun, and you’ll see a list of the available events:

Does it handle Xtypes, Types, and Other Aliases?

The plugins will suggest values anywhere that aliases are used. The most common type of alias is xtype, a shorthand name for view components:

Other aliases are also supported including ViewController and ViewModel types…

…and field types, as well…

Pretty much anywhere you use “type”, you’ll get a list of the relevant types based on the context.

Can it help with Controller methods?

In a view with a bound controller? If your ViewController has methods like this…

…you’ll see them when you type ctrl-space in the value of a listener config in your view:

What about View References?

In a ViewController and need to grab a reference to a view component? If you declare references in your view…

… you’ll see them in your ViewController…

Does it do Bind Expressions?

Last but not least, the plugins can help you reference stores, data, links, and formulas in your ViewModel when writing bind expressions. As long as you declare them in your ViewModel class like this…

…you’ll see them when completing bind expressions in your views…

What are some Best Practices? – Getting the Most Out of Code Completion

JSDuck

How do the Sencha Ext JS IDE plugins know what to suggest as you type? They index your code, looking for common Ext JS conventions such as Ext.define for creating classes as well as JSDuck/JSDoc comments. JSDuck is the documentation tool that Sencha uses to generate all of our API docs. If you aren’t already using it to document your own projects, I highly recommend it. In addition to producing great, searchable docs, it will also enrich your IDE experience because it makes it easier for the plugins to understand your classes. For example, if you annotate your own classes’ configs with @cfg tags…

…you’ll see them suggested when creating instances of the component elsewhere in your code…

Ext JS Source Code

Perhaps most importantly, the plugin needs to index the Ext JS framework itself in order to provide code completion suggestions. In order to do that, the framework source simply needs to reside somewhere inside your project. If you’re using Sencha Cmd to build your project, this is done automatically. If the framework source doesn’t reside in your project, you can point the plugin to it by following this guide.

Ready to get started?

I’ve outlined how you can get the most out of the Sencha IDE Plugins for Eclipse, Visual Studio, and the JetBrains product line (IntelliJ, WebStorm, RubyMine, PhpStorm, and PyCharm). If you have any questions or feedback, please share it with us in the forums for Eclipse Plugin, Visual Studio Plugin, or JetBrains Plugin.