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

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.

Solution

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.