Funky indentation in Lightning Components

[Derek Wiers]

I've been working in Lightning components recently and found something interesting: We use tabs for indentation, continuation indent width = 4 spaces, smart tabs is off. However, when I have markup in this basic format:

<tag>
    {!content}
</tag>

The tags are properly indented, but {!content} is not - it is using spaces and is indented 8 spaces in. I have a funny feeling it's just hardcoded formatting functionality instead of reading from the formatting options

[Scott Wells]

That's interesting. I haven't created an IC-specific formatter for Lightning and Visualforce. The formatting there should be governed by IntelliJ's own HTML formatter. It's possible that the injected expressions are causing some strange behavior, though. I use the formatter on our own VF and Lightning markup and haven't seen this, though. Let me take a look and I'll let you know what I find...

[Chuck Liddell]

I've noticed this as well. The only thing that makes me think this might be related to IlluminatedCloud and not just the native HTML formatter is that the behavior only manifests with Lightning expressions.

Example:

<tag />
something

<tag />
{something}

<tag />
        {!something}

<tag />
        {#something}

<tag />
{$something}

The indent only happens on {! and {# but not anything else.

FWIW the brackets and the opening symbol turn orange for those two special characters, otherwise (like my $ example) the text stays all gray. Clearly something is noticing that particular character sequence.

[Scott Wells]

Oh, I think that's rather incriminating! I'll take a look and see how the HTML formatter is perceiving the injected expressions. As you can hopefully imagine, there's a bit of wizardry involved in blending languages like that, and it's possible I missed some key aspect around the formatter.

[Former user]

FWIW, we indent xml to 2 spaces which works except for the braces as mentioned above. The only difference is that we get output like this:

        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
          {!$Label.c.CD_SREC}
          </div>
        </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
                  {!$Label.c.CD_Disbursal_Request}
          </div>
        </div>

If I create a new HTML5 file and paste the .cmp contents in, it formats as I expect.

[Scott Wells]

Delivered in 2.0.0.3 for IC2. Will be included in the next IC1 build as well.

[Former user]

Great - thanks Scott!

[Scott Wells]

IC1 fix delivered in 1.8.1.6.