After I saved a json file in Visual Studio Code, it automatically formats the document, that arrays are displayed vertically (by adding line breaks). Since I have giant integer arrays, it makes a quick look into the file nearly impossible. Example:

{
    "big_integer_array": [
        12,
        15,
        13,
        1,
        5,
        8,
        15,
        14,
        12,
        ...
    ],
    "this_value_is_in_line_million": true
}

How can I tell the program, to display numeric arrays horizontally like this:

{
    "big_integer_array": [12,15,13,1,5,8,15,14,12, ...],
    "this_value_is_in_line_three": true
}

Solution

1. Use the extension esbenp.prettier-vscode
2. Set the prettier.printwidth to 99999999999

CodePudding user response：

There is currently no way to customize the VS Code native formatter to format arrays in the way you suggest, however, the prettier formatter will configure them as you suggest. Prettier is a widely used formatter, and is used by a good majority of VS Code users.

The ID for the official prettier extension is: esbenp.prettier-vscode

It's important to note that Prettier will take care of arrays that have a single type of input for you. So if an array is all numbers, or all strings, however; if an array consist of mixed types, numbers, objects, arrays in arrays, strings, boolean values, etc... Then the way prettier formats the array is contingent on how you place the brackets initially.

Formatting Mixed arrays with Prettier

For this example's sake, lets say have the following array in a json file.

{
  "obj": {
    "Array": [
      "Apple",
      "Broccoli",
      "Coconut",
      "Orange",
      "Carrot",
      {
          "foo": "apple"
      }
    ]
  }
}

If you change the brackets in the array, so that the array looks like the following:

{
  "obj": {
    "Array": [
      "Apple",
      "Broccoli",
      "Coconut",
      "Orange",
      "Carrot",
      {"foo": "apple"}
    ]
  }
}

Your basically telling prettier that you don't want to break up your embedded objects and arrays vertically, but rather, you want to keep them horizontally. Formatting the example above (using prettier) will result in your file looking like the example below:

{
  "obj": {
    "Array": ["Apple", "Broccoli", "Coconut", "Orange", "Carrot", { "foo": "apple" }]
  }
}

However, if you format your array like this:

{
  "obj": {
    "Array": ["Apple", "Broccoli", "Coconut", "Orange", "Carrot", {
         "foo": "apple" 
         }]
  }

Then when you format the above example using prettier, you will produce the output below:

{
  "obj": {
    "Array": [
      "Apple",
      "Broccoli",
      "Coconut",
      "Orange",
      "Carrot",
      {
        "foo": "apple"
      }
    ]
  }
}

Also note than the following settings in your VS Code's settings.json file can affect how prettier formats JSON as well:

1. "prettier.useTabs": true|false (says to use tab, or spaces)
2. "prettier.tabWidth": Numeric Value (Sets tab spacing qty)
3. "prettier.printWidth": Numeric Value (Sets line length)
4. "prettier.bracketSpacing": True|False (Adds/Removes spacing in brackets)