Top 10 Features of Code Completion for Lightning in JetForcer IDE
Today, I would like to tell you about the top 10 code completion features in JetForcer IDE, which indeed save time during developing Lightning applications.
1) Custom and built-in tags and their attributes
The Lightning framework provides a set of standard, built-in components, such as aura:if and lightning:button, that can be used to develop Lightning applications. In addition, you can build your own custom components to augment this set. JetForcer support involves completion for both.
Press < and start typing a component name. JetForcer suggests a list of component names available in the current context. Press Enter to accept a selection from the list. Nice thing is that JetForcer automatically inserts required attributes according to the Lighting framework documentation. Furthermore, it automatically inserts the closing tag as soon as > was typed in the opening tag. When you change the opening tag, the closing tag is also automatically changed to match it.
2) Attribute values
Type a bit of attribute value and let JetForcer completes it - this approach indeed saves a lot of time. Completion popup suggests two kinds of values: static (based on Lightning documentation, or in other words based on XML schema) or dynamic (based on project files). JetForcer supports both.
This support works in lots of places, such as:
aura:component@controller(suggests classes)aura:component@extends(suggests lightning components)aura:set@attribute(suggests component attributes)aura:attribute@type(suggests classes, interfaces, sobjects, enums etc.)aura:attribute@required(suggests true or false)aura:handler@event(suggests lightning events)aura:registerEvent@type(suggests lightning events)
… and many others.
3) Value Providers
In markup
In JavaScript
Value Providers usage is one of the most frequently occurring tasks during Lightning developing. There are two providers: v (View) and c (Controller), both can be used in two different contexts: within application or component markup and inside JavaScript code (controller, renderer or helper).
Controller provider gives different data depending on the context:
- In markup, it allows to wire up event handlers and actions for the component.
- In JavaScript code, it provides access to server-side controller methods.
As for the View provider, it's always used to access the component’s attribute.
4) Component Local ID (aura:id)
A local ID is an ID that is defined by the aura:id attribute within component markup. These IDs are used for retrieving a component in client controller code by calling component.find(“someAuraID”) method. JetForcer gets an intelligent insight into your code (“calculates context”) and provides smart completion for this case.
5) JavaScript API from Aura Framework
The $A namespace is the entry point for the Aura framework in JavaScript code. JetForcer provides completion for all the methods available in $A.
6) Support parameters in setParams() function Server-side controller method Event parameters
Server-side actions and events should be configured with setParams function before calling or firing. JetForcer supports completion of parameter names. Only unused parameters will be suggested in completion popup to avoid duplicates during defining. One more interesting feature for setParams is validation. It includes warning about duplicates and parameters with wrong case name.
7) Global Variables
Global Variables are global values and methods that a component can use in expressions. Here is a few of them:
globalId$Resource$Label$Locale$Browser
They are available in markup and in JavaScript code, and of course, JetForcer supports completion in both contexts (since version 1.2)
8) Color Picker
One more helpful code completion feature is available when you type color in CSS. Invoke completion in any color-related property (such as background color or border color) and popup will display a list of colors. Select the desired color value from the suggestion list, or choose color... to pick a custom one.
9) CSS classes: custom and from SLDS library
The Salesforce Lightning Design System (SLDS) supplies a set of standard, built-in CSS classes that you can use in your components or applications. In addition, a lightning bundle can include an own CSS file with styles - JetForcer autocompletes both styles from SLDS library and bundle styles.
10) sObjectType json property in lightning attribute “default“
Lightning supports creation of a component attribute with a default value (e.g. if you don’t like undefined attribute state) Moreover, if you use a SObject typed attribute, you don’t have to initialize its default value from a js controller. All you need is to write a JSON expression which describes your SObject.
For this purpose, JetForcer has completion for SObject fields inside JSON expressions. It helps to define fields faster.
Summary
I hope this article helps to better understand how code completion works in JetForcer, what benefits it gives for a developer and how much of your time JetForcer can save.
