Js-beautify: Vertically align (indent) values in object literals

[binarykitchen]

Would be nice to modify from

{
    browserName: 'internet explorer',
    platform: 'Windows 7',
    version: '8'
}

to

{
    browserName: 'internet explorer',
    platform:    'Windows 7',
    version:     '8'
}

but cannot find such an option. Any clues? Or is this functionality missing?

[evocateur]

It's missing. You'd need to devise some way of counting the length of a key, storing it, then expanding every previous spacing when a later key lengthens...

[binarykitchen]

I see. But don't you parse the whole code tree first? Like that it's easy to get the longest key name ...

[bitwiseman]

No, in fact, we don't parse the whole tree first. See #200. sorry We do some post reformatting already for intelligent indenting, but this would be little harder. Possible future enhancement

[binarykitchen]

Alright, I understand. Peace out.

[bitwiseman]

This is getting closer to being possible. We actually do properly detect object blocks now. Still don't have a good way for re-spacing in side of a line.

[ghost]

Will you do something with that topic? I can see that this issue is still exists almost 3 years now and my ticket was closed. I don't know if I should wait or try to rewrite it and send pull request of my solution. :)

[evocateur]

Pull requests are always welcome.

[gentlefox]

Possible solution (unsure how Q&D attempt is going - I'll try it out later).
The Alignment plugin (Sublime Text, Textmate etc) utilises .jsbeautifyrc and offers the following settings and the desired functionality of this enhancement.
Alignment Settings

    {
      // If the indent level of a multi-line selection should be aligned
      "align_indent": true,

      // If indentation is done via tabs, set this to true to also align
      // mid-line characters via tabs. This may cause alignment issues when
      // viewing the file in an editor with different tab width settings. This
      // will also cause multi-character operators to be left-aligned to the
      // first character in the operator instead of the character from the
      // "alignment_chars" setting.
      "mid_line_tabs": false,

      // The mid-line characters to align in a multi-line selection, changing
      // this to an empty array will disable mid-line alignment
      "alignment_chars": ["=", ":"],

      // If the following character is matched for alignment, insert a space
      // before it in the final alignment
      "alignment_space_chars": ["=", ":"],

      // The characters to align along with "alignment_chars"
      // For instance if the = is to be aligned, there are a number of
      // symbols that can be combined with the = to make an operator, and all
      // of those must be kept next to the = for the operator to be parsed
      "alignment_prefix_chars": [
        "+", "-", "&", "|", "<", ">", "!", "~", "%", "/", "*", "."
      ]
    }

Alternative setting, following .eslintrc rules:

    'indent': ['error', 2, {
      'FunctionExpression': {
        'parameters': 'first'
      },
      'CallExpression': {
        'arguments': 'first'
      },
      'ArrayExpression': 'first',
      'ObjectExpression': 'first',
      'flatTernaryExpressions': true
    }],
    'key-spacing': ['error', {
      'singleLine': {
          'beforeColon' : false,
          'afterColon'  : true
        },
        'multiLine': {
          'beforeColon' : true,
          'afterColon'  : true,
          'align'       : 'colon'
        }
    }],

Based on whether Array, Object, or sequential Variable declarations, parse file as per usual with multiline for each of these flagged to do so. Parser stores type and line range.
ie:

    {
      "array": ["16-20"],
      "object": ["23-26", "41-47", "53-60"],
      "variable": ["4-12", "31-34"]
    }

This way 3 unique formatting methods can be applied in turn.

Is it still shameless code borrowing if you reference the source? ^grin^