Intermediate code formatting

[R3dKap]

Today, at the bottom of the code editor there are 2 buttons to format the code: FORMAT TEXT and REMOVE FORMATTING.

FORMAT TEXT produces something like this:

ClearCollect(
    gloControlEnums,
    {
        name: "Font",
        values: Table(
            {
                name: "Arial",
                value: Font.Arial
            },
            {
                name: "Courier New",
                value: Font.'Courier New'
            },
            {
                name: "Dancing Script",
                value: Font.'Dancing Script'
            },
            {
                name: "Georgia",
                value: Font.Georgia
            },
            {
                name: "Great Vibes",
                value: Font.'Great Vibes'
            },
            {
                name: "Lato",
                value: Font.Lato
            },
            {
                name: "Lato Black",
                value: Font.'Lato Black'
            },
            {
                name: "Lato Hairline",
                value: Font.'Lato Hairline'
            },
            {
                name: "Lato Light",
                value: Font.'Lato Light'
            },
            {
                name: "Open Sans",
                value: Font.'Open Sans'
            },
            {
                name: "Open Sans Condensed",
                value: Font.'Open Sans Condensed'
            },
            {
                name: "Patrick Hand",
                value: Font.'Patrick Hand'
            },
            {
                name: "Segoe UI",
                value: Font.'Segoe UI'
            },
            {
                name: "Verdana",
                value: Font.Verdana
            }
        )
    },
    {
        name: "FontWeight",
        values: Table(
            {
                name: "Bold",
                value: FontWeight.Bold
            },
            {
                name: "Semibold",
                value: FontWeight.Semibold
            },
            {
                name: "Normal",
                value: FontWeight.Normal
            },
            {
                name: "Lighter",
                value: FontWeight.Lighter
            }
        )
    }
)

...while REMOVE FORMATTING produces this:

ClearCollect(gloControlEnums,{name:"Font",values:Table({name:"Arial",value:Font.Arial},{name:"Courier New",value:Font.'Courier New'},{name:"Dancing Script",value:Font.'Dancing Script'},{name:"Georgia",value:Font.Georgia},{name:"Great Vibes",value:Font.'Great Vibes'},{name:"Lato",value:Font.Lato},{name:"Lato Black",value:Font.'Lato Black'},{name:"Lato Hairline",value:Font.'Lato Hairline'},{name:"Lato Light",value:Font.'Lato Light'},{name:"Open Sans",value:Font.'Open Sans'},{name:"Open Sans Condensed",value:Font.'Open Sans Condensed'},{name:"Patrick Hand",value:Font.'Patrick Hand'},{name:"Segoe UI",value:Font.'Segoe UI'},{name:"Verdana",value:Font.Verdana})},{name:"FontWeight",values:Table({name:"Bold",value:FontWeight.Bold},{name:"Semibold",value:FontWeight.Semibold},{name:"Normal",value:FontWeight.Normal},{name:"Lighter",value:FontWeight.Lighter})})

...which looks like this in the code editor:

In fact, the code formatting that would REALLY be interesting (in terms of readability and maintenance) should be more like this:

ClearCollect(
    gloControlEnums,
    {
        name: "Font",
        values: Table(
            { name: "Arial", value: Font.Arial },
            { name: "Courier New", value: Font.'Courier New' },
            { name: "Dancing Script", value: Font.'Dancing Script' },
            { name: "Georgia", value: Font.Georgia },
            { name: "Great Vibes", value: Font.'Great Vibes' },
            { name: "Lato", value: Font.Lato },
            { name: "Lato Black", value: Font.'Lato Black' },
            { name: "Lato Hairline", value: Font.'Lato Hairline' },
            { name: "Lato Light", value: Font.'Lato Light' },
            { name: "Open Sans", value: Font.'Open Sans' },
            { name: "Open Sans Condensed", value: Font.'Open Sans Condensed' },
            { name: "Patrick Hand", value: Font.'Patrick Hand' },
            { name: "Segoe UI", value: Font.'Segoe UI' },
            { name: "Verdana", value: Font.Verdana }
        )
    },
    {
        name: "FontWeight",
        values: Table(
            { name: "Bold", value: FontWeight.Bold },
            { name: "Semibold", value: FontWeight.Semibold },
            { name: "Normal", value: FontWeight.Normal },
            { name: "Lighter", value: FontWeight.Lighter }
        )
    }
)

Another example...

With actual FORMAT TEXT:

If(
    StartsWith(
        ThisItem.value,
        "ColorFade"
    ),
    ColorFade(
        _galPalettePropertyColorRGBA.Fill,
        Value(
            Match(/* Get fading percentage */
                ThisItem.value,
                "-?\d+(?=(%\)))"
            ).FullMatch
        ) / 100
    ),
    _galPalettePropertyColorRGBA.Fill
)

...that could look like this with an INTERMEDIATE FORMATTING:

If(
    StartsWith( ThisItem.value, "ColorFade" ),
    ColorFade(
        _galPalettePropertyColorRGBA.Fill,
        Value( Match( ThisItem.value, "-?\d+(?=(%\)))" ).FullMatch ) / 100
    ),
    _galPalettePropertyColorRGBA.Fill
)

Some of the rules that could be applied for this INTERMEDIATE FORMATTING could be:

• no line of code must exceed the width of the code editor
• whether ALL or NONE of a function's parameters should be scattered on multiple lines

/* NO ! */
StartsWith(ThisItem.Value,
    "ColorFade"
)

/* YES ! */
StartsWith( ThisItem.Value, "ColorFade" )

• if a function call is laid out on a single line, all its parameters should be separated with spaces

/* NO ! */
StartsWith(ThisItem.Value,"ColorFade");
StartsWith(ThisItem.Value, "ColorFade")

/* YES ! */
StartsWith( ThisItem.Value, "ColorFade" )

• avoid as much as possible to scatter a function on multiples lines
• repetitive small groups of code should be "aligned" (like the example of the gloControlEnums in INTERMEDIATE FORMATTING above)
• ...

Note: I really don't see the use of the REMOVE FORMATTING feature since this is already done when publishing the app. And who on earth would ever use this type for code formatting ? 🙂

[xzDan]

Agreed.

A lot of the default formatting seems very unreadable with unnecessary spacing everywhere

[Bibinu75]

I think Formatting should automatically be applied when the expand button is clicked and removed when the editing box is collapsed back.