Refactoring to toggle an object between all-on-one-line to one-value-per-line

[uglycoyote]

This is a very simple refactoring (or you might call it a "reformatting"?) which I do every day manually, but haven't been able to find a tool which does this automatically.

When a dictionary (javascript object literal definition) has a small enough amount of keys and values, I usually declare it all on one line. Over time things get added and it becomes unreadable, and I eventually come to the point where I want to spread it over many lines. Occasionally I might want to do the opposite and take a many-line object and turn it back into a one liner, particularly if I'm removing elements from it.

In animated GIF format:

I would like to request this as a feature, if you think it is appropriate for abracadabra. If this exists somewhere else in an existing tool or plugin, I would be happy to install and use that.

Implementation-wise this should be pretty trivial, it's basically a regex search and replace something like replacing (.*?), with $1, \n on the part between the curly braces, along with some indentation fixups afterwards

(see that regex replacement in action here: https://regex101.com/r/fhujCp/1)

Doing this manually in VSCode would still be cumbersome though... I don't think VSCode lets you match and replace multiple instances of the regex within the same line, and trying to remember this regex and fix up the indentation manually afterwards, in any one case where I would want to apply that it's probably faster to do it the manual-labour way. But having this as a refactoring would be super nice.

[nicoespeon]

Hey @uglycoyote 👋

In fact, you can already do that with VS Code:

1. Select the lines and trigger the command "Join Lines" (eg. ⌃ J on MacOS) to have them in one-line
2. If you have a formatted setup (eg. Prettier), then usually you can trigger it after inserting a new line to get it back to multiple lines

Like so:

Hope that helps.

Now, that being said, these could also be part of Abracadabra. It's more of a stylistic change, but that's a valid refactoring. Having it in Abracadabra would have a few pros IMO:

1. Easier to discover, no need to combine 2 distinct commands to achieve the desired result
2. Faster to swap. Abracadabra knows about the AST, so it could trigger "Join Lines" from wherever inside the object. Today you have to select all the lines you wanna join.
3. More reliable. If you don't have a formatted setup, that would still work.

Therefore, I'm keeping the suggested issue open to be implemented.

If someone wants to pick this one up

Feel free to have a custom implementation based on @uglycoyote's suggestions… or delegate some of the work to VS Code.

Eg. I'm sure we can determine the proper lines Selection from the AST node we are in, then fire vscode.commands.executeCommand("editor.action.joinLines, ???) to somehow trigger the command without having to re-implement that.

In any case, write some tests to prove it's working. This way, we can change the implementation details as we like.

[uglycoyote]

Thanks @nicoespeon and sorry for my tardy reply.

Your suggestion about "Join Lines" and using Prettier indeed works. Though as you mentioned, maybe it's not that "discoverable" -- I hadn't ever thought about using Join Lines for this purpose, and also, though I was vaguely aware that Prettier existed, I didn't have it installed and didn't realize it might be a solution to this specific problem. It took me 20-30 minutes just to figure out how to use Prettier in VSCode. (after configuring it as the default formatter it still was not working on the .tsx file I tried it in, had to configure that separately)

Since prettier's "Format Selection" does a lot of things and isn't very specific, requires tuning and config etc, I agree that it still might be a good thing to add to Abracadabra as a stand-alone feature.