editor or extension that allows to auto-indent two dimensional array like table

Question

I'm looking for an editor or plugin (preferably for VS Code) that Allows me to automatically format an array like this:

const lines = [
    [ "step-1", "step", "step-1", "", `["1"]` ],
    [ "r", "repeater", "r", "", `[]` ],
    [ "mycheckbox__1[]", "input", "mycheckbox[]", "__1", `[]` ],
    [ "myradio__1", "input", "myradio", "__1", `[]` ],
    [ "mytext__1", "input", "mytext", "__1", `[""]` ],
    [ "myurl__1", "input", "myurl", "__1", `[""]` ],
    [ "myemail__1", "input", "myemail", "__1", `[""]` ],
    [ "myselect__1", "input", "myselect", "__1", `[""]` ],
    [ "mymultiselect__1[]", "input", "mymultiselect[]", "__1", `[]` ],
    [ "myfile__1", "input", "myfile", "__1", `[""]` ],
    [ "mymultifile__1[]", "input", "mymultifile[]", "__1", `[""]` ],
    [ "mycheckbox__2[]", "input", "mycheckbox[]", "__2", `[]` ],
    [ "myradio__2", "input", "myradio", "__2", `[]` ],
    [ "mytext__2", "input", "mytext", "__2", `[""]` ],
    [ "myurl__2", "input", "myurl", "__2", `[""]` ],
    [ "myemail__2", "input", "myemail", "__2", `[""]` ],
    [ "myselect__2", "input", "myselect", "__2", `[""]` ],
    [ "mymultiselect__2[]", "input", "mymultiselect[]", "__2", `[]` ],
    [ "myfile__2", "input", "myfile", "__2", `[""]` ],
    [ "mymultifile__2[]", "input", "mymultifile[]", "__2", `[""]` ],
    [ "r_count", "input", "r_count", "", `["1"]` ],
    [ "root-mycheckbox[]", "input", "root-mycheckbox[]", "", `[]` ],
    [ "root-myradio", "input", "root-myradio", "", `[]` ],
    [ "root-mytext", "input", "root-mytext", "", `[""]` ],
    [ "root-myurl", "input", "root-myurl", "", `[""]` ],
    [ "root-myemail", "input", "root-myemail", "", `[""]` ],
    [ "root-myselect", "input", "root-myselect", "", `[""]` ],
    [ "root-mymultiselect[]", "input", "root-mymultiselect[]", "", `[]` ],
    [ "root-myfile", "input", "root-myfile", "", `[""]` ],
    [ "root-mymultifile[]", "input", "root-mymultifile[]", "", `[""]` ],
    [ "step-2", "step", "step-2", "", `["2"]` ],
];

to something more readable, like this:

const lines = [
    [ "step-1",               "step",     "step-1",                 "",     `["1"]` ],
    [ "r",                    "repeater", "r",                      "",     `[]`    ],
    [ "mycheckbox__1[]",      "input",    "mycheckbox[]",           "__1",  `[]`    ],
    [ "myradio__1",           "input",    "myradio",                "__1",  `[]`    ],
    [ "mytext__1",            "input",    "mytext",                 "__1",  `[""]`  ],
    [ "myurl__1",             "input",    "myurl",                  "__1",  `[""]`  ],
    [ "myemail__1",           "input",    "myemail",                "__1",  `[""]`  ],
    [ "myselect__1",          "input",    "myselect",               "__1",  `[""]`  ],
    [ "mymultiselect__1[]",   "input",    "mymultiselect[]",        "__1",  `[]`    ],
    [ "myfile__1",            "input",    "myfile",                 "__1",  `[""]`  ],
    [ "mymultifile__1[]",     "input",    "mymultifile[]",          "__1",  `[""]`  ],
    [ "mycheckbox__2[]",      "input",    "mycheckbox[]",           "__2",  `[]`    ],
    [ "myradio__2",           "input",    "myradio",                "__2",  `[]`    ],
    [ "mytext__2",            "input",    "mytext",                 "__2",  `[""]`  ],
    [ "myurl__2",             "input",    "myurl",                  "__2",  `[""]`  ],
    [ "myemail__2",           "input",    "myemail",                "__2",  `[""]`  ],
    [ "myselect__2",          "input",    "myselect",               "__2",  `[""]`  ],
    [ "mymultiselect__2[]",   "input",    "mymultiselect[]",        "__2",  `[]`    ],
    [ "myfile__2",            "input",    "myfile",                 "__2",  `[""]`  ],
    [ "mymultifile__2[]",     "input",    "mymultifile[]",          "__2",  `[""]`  ],
    [ "r_count",              "input",    "r_count",                "",     `["1"]` ],
    [ "root-mycheckbox[]",    "input",    "root-mycheckbox[]",      "",     `[]`    ],
    [ "root-myradio",         "input",    "root-myradio",           "",     `[]`    ],
    [ "root-mytext",          "input",    "root-mytext",            "",     `[""]`  ],
    [ "root-myurl",           "input",    "root-myurl",             "",     `[""]`  ],
    [ "root-myemail",         "input",    "root-myemail",           "",     `[""]`  ],
    [ "root-myselect",        "input",    "root-myselect",          "",     `[""]`  ],
    [ "root-mymultiselect[]", "input",    "root-mymultiselect[]",   "",     `[]`    ],
    [ "root-myfile",          "input",    "root-myfile",            "",     `[""]`  ],
    [ "root-mymultifile[]",   "input",    "root-mymultifile[]",     "",     `[""]`  ],
    [ "step-2",               "step",     "step-2",                 "",     `["2"]` ],
];

I've looked for some online tools, but found none. And while there are some extensions to format CSV files, it's a bit of a hassle to first turn my code into a valid CSV file and then add brackets with find and replace.

So currently, I'm still tabbing arrays like this manually if they are not too large. Would be cool to have an automatic formatting tool in my code editor though.

user_836330 · Answer

I tried this extension on your code and it works nicely: Smart Column Indenter

This extesnion contributes commands, such as extension.smartColumnIndenter.indentN which is bound to a keybinding by default: Ctrl+I Ctrl+N so you could use that or re-bind it instead of using the context menu as I did in the demo.

user_1789574 · Answer

CudaText editor (free) now has the plugin, it was written per this question.

menu "Plugins / Addon manager / Install"
find "CudaExt" plugin
CudaExt plugin will give menu item "Plugins / Cuda-Ext / Align / Align comma-separated columns in selected lines"

Note that for your example, it don't align final ] brackets, because it's for any syntax. Some syntax can allow things like op[ind] at the line end, so it don't align ] bracket to not break the code.

editor or extension that allows to auto-indent two dimensional array like table

2 Answers