Vscode: [json] option to format code with leading commas

[SetTrend]

Can we get an option in VS Code to have it format all lists by using leading commas instead of trailing commas?

This would so much simplify editing code and it would also greatly simplify the IDE's automatic code completion (e.g. the VS Code Settings editor).

With the suggested option set to true, comma separated lists would proposedly be formatted like this:

{ "workbench.iconTheme": "vs-seti"
, "editor.lineNumbers": "off"
, "editor.tabSize": 2
, "editor.insertSpaces": false
, "editor.autoClosingBrackets": false
}

Function calls using line wrapping for their arguments would look like this:

call( 1
    , "test"
    , new Console()
    );

a nested sample would look like this:

{ "version": "0.2.0"
, "configurations":
  [ { "type": "node"
    , "request": "launch"
    , "name": "Programm starten"
    , "program": "${file}"
    }
  , { "type": "node"
    , "request": "attach"
    , "name": "An den Port anfügen"
    , "address": "localhost"
    , "port": 5858
    }
  ]
}

---

This formatting style would result in much cleaner, tidier code.

---

Moreover, adding a new property to an object would be a snap:

Either copy/paste from an existing property (=> no more syntax errors due to redundant trailing commas, see screenshot below):

... or create a new property and you might immediately get IntelliSense right after typing the leading comma of the property to create.

---

The suggested formatting style is applicable to all languages

E.g. T-SQL:

CREATE TABLE
  ( id INT PRIMARY KEY IDENTITY
  , name NVARCHAR(100) NOT NULL UNIQUE CHECK(LEN(name) > 0)
  , created DATETIME NOT NULL DEFAULT(GETDATE())
  , updated DATETIME NOT NULL DEFAULT(GETDATE())
  )

[maneesht]

@aeschli I'd like to help out with this, if no one's working on it.

[SetTrend]

@aeschli :
Thanks for taking the time! 👍

Yet, my proposal is not only dealing with JSON, but with all languages. (See the _function call_ example and the _T-SQL_ example I gave above).

I admit that some of the code samples and the screenshot I added might infer a JSON affinity. I didn't consider this when I created them. And it didn't happen by intention.

I propose to make this a global VS Code editor option, applying to all applicable languages.

[aeschli]

@SetTrend Every language has a different formatter, and very few shared the implementation. IMO sharing formatter settings is not realistic, there are too many subtle differences between languages.

[aeschli]

@maneesht The JSON formatter implementation is in https://github.com/Microsoft/vscode-json-languageservice/blob/master/src/services/jsonFormatter.ts.
You'll also find test cases there.
Pull requests are highly welcome, please create them in the vscode-json-languageservice repository .

[SetTrend]

@aeschli I understand. Thanks for enlightening me.

I'm not sure about the current VS Code implementation, yet (I can only speak for myself here) in every C-style language I'm using I'm always configuring all the common formatting settings alike. I do this in VS Code and in VS Enterprise. (Which is rather tedious, but I wouldn't want to switch formatting styles from language to language - would anyone?)

Wouldn't it make sense to provide a common base formatter for C-style languages that could be used and overriden by language services to add peculiarities to a language's formatting?


Anyway, I believe, the decision to use leading instead of trailing commas is a design decision similar to using _folding_ or preferring _spaces_ to _tabs_, or vice versa. Folding, for instance, is implemented per language, too. Yet, the option in VS code is a global one.

That's why I'd like to propose a global setting, like editor.listFormatting, using an enumeration, like

enum ListFormatting
{ TrailingComma
, LeadingComma
, LeadingCommaCompact
}

The difference between LeadingComma and LeadingCommaCompact is the way closing brackets shall be treated: If consecutive closing brackes appear, they should probably not take a line on their own, depending on user preference. LeadingCommaCompact would, after a comma separated line-split list has been formatted, take the additional step of collapsing all whitespace between consecutive closing brackets to a single space character.

A generic implementation (valid for all languages) would be rather simple, because in all languages a comma separated, line-split list is always characterized by matching brackets (i. e. (, [, {, < and their counterparts) containing commas accompanied by one or more line-breaks.

A generic (pseudo) implementation may look like the following

let lists : List[] = editor.getLists();  // that's a ubiquitios function, fitting lists in all kinds of languages

foreach (var i = 0;i < lists.length;++i)
  lists[i].Format();  // that's a ubiquitios function, too, fitting lists in all kinds of languages

editor.replaceLists(lists);  // that's another ubiquitios function, fitting lists in all kinds of languages

class List
{
  public SelEnd : number;
  public Content: string;


  List(editorText : string, public SelStart: number)
  {
    // find the next beginning of a comma separated, line-split list
    this.SelStart = ...;

    if (this.IsValid())   // could a comma separated, line-split list be found?
    {
      // find the end of that list
      this.SelEnd = ...;

      this.Content = editorText.substring(this.SelStart, this.SelEnd);
    }
  }


  function Format()
  {
    switch (Application.Settings.Editor.listFormatting)
    {
      case ListFormatting.TrailingComma:
        this.Content = ...;
        break;

      case ListFormatting.LeadingComma:
      case ListFormatting.LeadingCommaCompact
        this.Content = ...;
        break;
    }

    if (Application.Settings.Editor.listFormatting === ListFormatting.LeadingCommaCompact)
    {
      // collapse whitespace on consecutive closing brackets.
      this.Content = this.Content.replace(/([\])}])\s+([\])}])/, "$1 $2");
    }
  }


  function IsValid() : boolean => this.SelStart >= 0;
}

Editor.prototype.getLists = function()
{
  let result : List[] = [];

  for (let textPos = 0; textPos < this.TextContent.length;)
  {
    let list : List = new List(this.TextContent, textPos);

    if (!list.IsValid()) break;   // no more lists found in editor's text buffer?

    result.push(list);
    textPos += list.SelEnd - list.SelStart;
  }

  return result;
}

Editor.prototype.replaceLists = function(lists : List[])
{
  for (let i = lists.length;i > 0;)
  {
    let list : List = lists[--i];

    this.TextContent = this.TextContent.substr(0, list.SelStart) + list.Content + this.TextContent.substr(list.SelEnd);
  }
}

[maneesht]

@aeschli How would I test my code for this? Any tips would be appreciated!

[SetTrend]

@dbaeumer : May I invite you to this thread? Would you mind having a look at this and share your opinion?

[phinque]

I agree with this concept, add formatting for leadingCommas to all languages

[caub]

Why do people still use this leading-commas formatting? objects, arrays, functions allow trailing commas (even json5 does) now, it's significantly more readable

[SetTrend]

They always did. Same as they always supported leading commas. There is no rule on where to put punctuation characters.

Actually, once you started using leading commas you will immediately recognize the benefit of using it, and you will never want to revert to struggle with the clumsiness of trailing commas.

[SetTrend]

Just for the sake of showing that this kind of formatting is not an unpopular one:

https://docs.npmjs.com/misc/coding-style#comma-first

[caub]

@SetTrend It's maybe an old page, because they don't appear to use this comma style anymore, example: https://github.com/npm/npm/blob/latest/lib/hook.js

[twskj]

It is hard to judge at the moment because most tools are in favor of trailing style. Until there is a comparable tool readily available, drawing samples from heavily bias pool will not tell much.

[Vildan]

For now using Better Align extention. Works pretty well. https://marketplace.visualstudio.com/items?itemName=wwm.better-align