Not formatting lightning components properly

[Nagendra Singh]

I have used intellij standard formatting Ctrl+Shift+Alt+L and it reformats all the apex code, but sometimes it fails to format lightning components.

Is there a setting I am missing?

Unformatted pict

[Scott Wells]

Are you using Ultimate Edition or Community Edition? If the latter, it doesn't include formatters for HTML, JavaScript, or CSS. You can read more about the differences between the host IDEs for Illuminated Cloud here:

http://www.illuminatedcloud.com/support/faq#IDEComparison

If you are using Ultimate Edition and formatting isn't working, please let me know.

[Scott Wells]

I'm going to resolve this assuming it's not formatting because the base IDE is Community Edition, but if that's a flawed assumption please reopen and I'll investigate what's happening.

[Nagendra Singh]

I tried to use webstorm trial version and illuminated cloud 2 trail version, but still the formatting doesn't improve. Does this only work in intellj IDEA Ultimate version?

[Nagendra Singh]

I tried to use webstorm trial version and illuminated cloud 2 trail version, but still the formatting doesn't improve. Does this only work in intellj IDEA Ultimate version?

Please resolve it again if that's correct? I will try beautifying it with some online tool.

[Scott Wells]

No, WebStorm and Ultimate Edition have the exact same HTML/JavaScript/CSS tools from JetBrains including the code formatters for those languages. Only Community Edition is lacking them. Here's a little animated GIF of HTML, JS, and CSS reformatting in WebStorm:

It just occurred to me that you said Ctrl+Shift+Alt+L which brings up the reformatting dialog. That works for me as well, but what option are you choosing from that dialog? I always just use Ctrl+Alt+L which reformats the selected block or, if nothing is selected, the file(s).

Let me know if that doesn't work for you. It's definitely a first-class feature of both Ultimate Edition and WebStorm that I use pretty much every day.

[Nagendra Singh]

I basically do a Ctrl+A to select the full file and then Ctrl+Shift+Alt+L to bring up the window and then run it on "Selected Text".

<!--
 - Created by nagesingh on 8/21/2018.
 - This component is used to create Case in Salesforce

 @CaseCreationEvent_ACE defined here as register event generates an Application Event as soon as a case is created.
 This event is then read by the CaseRelatedArticleComponent_ACE.cmp and it fires a query on server side to get the
 list of articles which is related to that word.
 -->

<aura:component description="CaseCreationApplicationComponent_ACE"
                implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId"
                controller="CaseCreationLightingController_ACE">

    <aura:attribute name="case" type="Case" default="{'sobjectType': 'Case',
                         'Status': '',
                         'Origin': '',
                         'Comments': ''
                       }"
                    access="global"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="Spinner" type="boolean" default="false"/>
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="showError" type="Boolean"/>
    <aura:attribute name="showSuccess" type="Boolean"/>
    <aura:attribute name="errorNumber" type="String"/>
    <aura:registerEvent name="caseCreationEvent" type="c:CaseCreationEvent_ACE"/>

    <aura:if isTrue="{!v.Spinner}">
        <div aura:id="spinnerId" class="slds-spinner_container">
            <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>

    <div>
        <div class="slds-page-header">
            <div class="slds-media">
                <div class="slds-media__body">
                    <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Create New Case">Create
                        New
                        Case
                        <span style="float: right"><lightning:button aura:id="refreshScreen"
                                                                     class="slds-button slds-button_neutral"
                                                                     onclick="{!c.refreshScreen}"> Clear
                                </lightning:button></span>
                    </h1>
                </div>
            </div>
        </div>
        <div class="slds-grid slds-wrap" style="background-color: white; min-height: 200px">
            <aura:if isTrue="{!v.showError}">
                <div style="min-height:200px">
                    <h1 style="color: red; font-weight: bold">{!v.errorNumber}</h1>
                </div>
                <aura:set attribute="else">
                    <aura:if isTrue="{!v.showSuccess}">
                        <div style="min-height:200px">
                            <h1 style="color: green; font-weight: bold; font-size: xx-large; padding:14%">Case
                                Created!</h1>
                        </div>
                        <aura:set attribute="else">
                            <div class="slds-size_1-of-2" style="padding: 5px">
                                <lightning:select aura:id="statusId" name="status" label="Status" required="true"
                                                  messageWhenValueMissing="Please select a status">
                                    <option value="">--None--</option>
                                    <option value="new">New</option>
                                    <option value="escalated">Escalated</option>
                                    <option value="closed">Closed</option>
                                </lightning:select>
                            </div>
                            <div class="slds-size_1-of-2" style="padding: 5px">
                                <lightning:select aura:id="originId" name="origin" label="Origin" required="true"
                                                  messageWhenValueMissing="Please select an Orgin">
                                    <option value="">--None--</option>
                                    <option value="phone">Phone</option>
                                    <option value="email">Email</option>
                                    <option value="web">Web</option>
                                </lightning:select>
                            </div>
                            <div class="slds-size_1-of-1" style="padding:20px">
                                <lightning:textarea aura:id="commentId" name="comments" required="true"
                                                    value="{!v.case.Comments}"
                                                    placeholder="Enter comments here"
                                                    label="Comments"
                                                    messageWhenValueMissing="Comments required" minlength="3"/>
                            </div>
                            <div class="slds-size_1-of-2" style="padding:20px" align="left">
                                <lightning:button aura:id="createCaseId" class="slds-button slds-button_brand"
                                                  onclick="{!c.createCaseController}"> Create case
                                    Contact
                                </lightning:button>
                            </div>
                            <div class="slds-size_1-of-2" style="padding:20px" align="right">
                                <lightning:button aura:id="clearFieldsId" class="slds-button slds-button_neutral"
                                                  onclick="{!c.clearFields}"> Clear
                                </lightning:button>
                            </div>
                        </aura:set>
                    </aura:if>
                </aura:set>
            </aura:if>
        </div>
    </div>
</aura:component>

I have even pasted the code for which the formatting does not work.

And yes it works in css, js, apex files and also aura, but it fails when we have this format,

Lightning button inside span which is inside h1. No issues as such, just wanted to know if illuminated cloud provides indentation of its own or uses IDE indentation. I can make the indentation work by some online beautifier.

[Scott Wells]

Ah, okay. So the issue is not that the formatter isn't working at all. The issue is that a specific type of block isn't formatting properly. I can see the block that formats as:

                        <span style="float: right"><lightning:button aura:id="refreshScreen"
                                                                     class="slds-button slds-button_neutral"
                                                                     onclick="{!c.refreshScreen}"> Clear
</lightning:button></span>

Interestingly if I put the cursor on that line and type Ctrl+Alt+I (Indent line), it indents to the correct location and stays there. Whatever is going on seems to be with JetBrains' native formatter for HTML. Illuminated Cloud doesn't include its own HTML/JS/CSS formatters...instead it injects Visualforce and Lightning component markup into that HTML editor and leverages it.

I did try tweaking one setting of the HTML formatter and it seems to fix the issue, but in all honesty I didn't test it extensively to know what negative side effects it might have. In Preferences>Editor>Code Style>HTML on the Other tab, find the setting called Keep white spaces inside and try removing span. When I did that, it formats:

                    <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Create New Case">Create
                        New
                        Case
                        <span style="float: right"><lightning:button aura:id="refreshScreen"
                                                                     class="slds-button slds-button_neutral"
                                                                     onclick="{!c.refreshScreen}"> Clear
                            </lightning:button></span>
                    </h1>

into:

                    <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Create New Case">Create
                        New
                        Case
                        <span style="float: right">
                            <lightning:button aura:id="refreshScreen"
                                              class="slds-button slds-button_neutral"
                                              onclick="{!c.refreshScreen}"> Clear
                            </lightning:button>
                        </span>
                    </h1>

Let me know if that doesn't give you what you're looking for...or at least get it closer. Beyond that unfortunately I can only really recommend playing with those formatter settings to see if you can get them to your liking.

[Scott Wells]

I am going to go ahead and resolve this again since it does seem to be something you can configure to format properly, and it unfortunately doesn't seem to be an issue with IC itself but rather with the underlying HTML formatter.

[Scott Wells]

Issue #1086 was marked as a duplicate of this issue.