Top 10 Features of Code Completion for Lightning in JetForcer IDE

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

aura component

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

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

Value Providers

In JavaScript

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)

Component Local

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

JavaScript API

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

Support parameters

JetForcer supports

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

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

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

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 attribute

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.

Popular Salesforce Blogs