- edited description
- changed component to Formatter
Funky indentation in Lightning Components
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
Comments (9)
-
reporter -
reporter - edited description
-
repo owner 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...
-
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.
-
repo owner 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.
-
Account Deleted 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.
-
repo owner Delivered in 2.0.0.3 for IC2. Will be included in the next IC1 build as well.
-
Account Deleted Great - thanks Scott!
-
repo owner - changed status to resolved
IC1 fix delivered in 1.8.1.6.
- Log in to comment