How to display numeric json arrays horizontally in Visual Studio Code? - visual-studio-code

Question

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
Use the extension esbenp.prettier-vscode
Set the prettier.printwidth to 99999999999

Answer 1

There is a new setting built-in to vscode v1.70 specifically for this situation:
JSON > Format: Keep Lines <= enable this in your Settings
"json.format.keepLines": true <= or use that setting in your settings.json
This feature allows one to keep the initial line positions upon line
formatting of JSON documents. For example an array containing values
on one line will still contain these values on the same line after
formatting. To enable this feature, enable the option JSON > Format: Keep Lines in the settings.
from https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_70.md#keep-newlines-when-formatting-json
Demo using the Insiders Build - first without the setting enabled and then after enabling the setting:

Answer 2

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:
"prettier.useTabs": true|false (says to use tab, or spaces)
"prettier.tabWidth": Numeric Value (Sets tab spacing qty)
"prettier.printWidth": Numeric Value (Sets line length)
"prettier.bracketSpacing": True|False (Adds/Removes spacing in brackets)