einars/js-beautify — Issue #80: Diff friendly literals
Author: johan
Created: 2011-11-29 01:22:45+00:00
State: open

I'd like a "diff friendly literals" indentation style that puts element separator commas and leading `{` or `[` characters at the beginning of the line instead of at the end of it, and `]` and `}` characters on a line of their own.

I first encountered this indentation style for literals (and function calls with lots of arguments spread across multiple lines):

{ "online": true
, "null": null
, "japanese": "明日がある。"
, "url": "http://jsonview.com"
, "notnurl": "http://jsonview.com is great"
, "zero": 0
, "float": 47.11
, "empty": ""
, "number": 243
, "object":
{ "It may look a bit weird, at first": "but it's great for development,"
, "array":
[ 1
, 2
, [ 1
, 2
, { "as adding or removing values": "just changes the lines involved,"
}
]
, "and never any surrounding lines with just a comma added or removed."
, "This makes diffs look way prettier and cleaner in github changesets."
]
, "more\u0000challenging": "stuff \t with \b misc \f control ☠ codes\r\n"
}
}

It looked weird and broken enough for me to ponder why I reacted strongly to it and why anyone would possibly prefer it, and it immediately dawned on me: because it solves an even more annoying problem:

In line-based version control systems (read: all of them), whenever you add or remove a property in a chunk of JSON, the diff touches not just the lines of the new properties you added, but also changes the line before it which now gets another comma character in place of the `]` or `}` that was there before, which leads to uglier changesets.

The above indentation style doesn't have that problem (except in the rare case when an empty object or array becomes not so, and vice versa), as each new item comes with its own comma, on its own line.