Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertically align (indent) values in object literals #365

Open
binarykitchen opened this issue Dec 5, 2013 · 8 comments
Open

Vertically align (indent) values in object literals #365

binarykitchen opened this issue Dec 5, 2013 · 8 comments

Comments

@binarykitchen
Copy link

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
Copy link
Contributor

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
Copy link
Author

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

@bitwiseman
Copy link
Member

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
Copy link
Author

Alright, I understand. Peace out.

@bitwiseman
Copy link
Member

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.

@bitwiseman bitwiseman changed the title Intend objects Indent objects with values aligned Oct 27, 2016
@bitwiseman bitwiseman changed the title Indent objects with values aligned Vertically align (indent) values in object literals Oct 27, 2016
@ghost
Copy link

ghost commented Nov 2, 2016

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
Copy link
Contributor

Pull requests are always welcome.

@gentlefox
Copy link

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^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants