question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vertically align (indent) values in object literals

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created 10 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
gentlefoxcommented, Aug 4, 2017

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^

1reaction
evocateurcommented, Nov 2, 2016

Pull requests are always welcome.

Read more comments on GitHub >

github_iconTop Results From Across the Web

vertical-align - CSS: Cascading Style Sheets - MDN Web Docs
The vertical-align property can be used in two contexts: To vertically align an inline element's box inside its containing line box.
Read more >
Why I vertically align my code (and you should too!)
Vertical alignment doesn't work in every context - but for quickly assessing data, its readability is unparalleled. Coding is a creative medium ...
Read more >
10 JavaScript Indentation Best Practices
1. Indent with two spaces · 2. Align your code vertically when possible · 3. Put a space after the colon in object...
Read more >
Why I vertically align my code (and you should too!)
You can automatically re-indent the code (change tabs to spaces or ... When you vertically align the variable/value pairs, it reads like a...
Read more >
Alignment, indentation, leading and spacing in cells
Click How to define spacing and leading in PdfPCell objects? centeredtextincell indenttable indentationincell leadingincell simpletable4 tablewithtab ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found