Sencha Ext JS 7.7 is Here – Discover What’s New and Exciting – LEARN MORE

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

February 25, 2016 109 Views
Show

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. Here are a few of the highlights:

All of the screenshots below are from Visual Studio 2015.

Class Names

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

Class Names

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:

Configs

Properties and Methods

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

Properties and Methods

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:

Events

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:

Xtypes

Other aliases are also supported including ViewController and ViewModel types…

Other Aliases

…and field types, as well…

Field Types

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

Controller methods

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

Controller Methods

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

Listener Config

View References

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

View References

… you’ll see them in your ViewController…

ViewController

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…

Bind Expressions

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

Views

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…

Annotate your own classes’ configs

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

Creating instances of the component

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.

Conclusion

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.

coming soon

Something Awesome Is

COMING SOON!