Is there a way to reformat a multi-line list into a single line, and vice-versa?

Given this code:

const x = [
2,
3,
8,
];

Is there a way to quickly reformat it (with a keystroke) to this?

const x = [2, 3, 8];

And also take a single line like the one above and break it out into multi-line, too.

22 comments
Comment actions Permalink

1. In Settings | Editor | Code Style |JavaScript, Wrapping and Braces, turn Keep when reformatting/Line Breaks OFF, then format your code (Code/Reformat Code...)

2. In Settings | Editor | Code Style |JavaScript, Wrapping and Braces, Array Initializer, choose 'Wrap always' and enable 'Place ']' on new line', then reformat code

1
Comment actions Permalink

@Elena

I believe that actual question was "how to switch between such formatting (both ways) at any time" -- something similar to how "Toggle Case" sort of actions work.

3
Comment actions Permalink

Andriy is right. I'm looking for a quick key command that will toggle.

1
Comment actions Permalink

I see. Then the answer is simple - no, where is no way to do this

1
Comment actions Permalink

Would be a handy feature.  Any plugins available?

1
Comment actions Permalink

@Stephen Wille

No idea TBH -- I personally know none.

1
Comment actions Permalink

That'd be a nice feature!

2
Comment actions Permalink

Yep agreed... Came here looking for this feature.  Would be very handy as it's something I often do manually, both ways.

2
Comment actions Permalink

The closest solution I know of is to bring array elements onto as few lines as possible. Highlight the lines you want to bring in, then Ctrl-Shift-J . To avoid having the formatter distribute array elements one per line again, put

//@formatter:off

before the code you do not want to have auto-formatted and

//@formatter:on

after
8
Comment actions Permalink

move a list to 1 line, you can use join line.  put the cursor on the first item, and press ctrl-shift-j.

To split the list, you can use find and replace with regex option. Higlight the list, then find the delimiter, and then replace the delimiter with delimiter\n .

BTW, the delimiter can be a space.

20
Comment actions Permalink

Thx a lot Scott !

0
Comment actions Permalink

For singlelining code, I often do Search & Replace with regex: '\n\s*' => ''

For reverse action, I use code formatting, it does most of the job well.

1
Comment actions Permalink

I'm surprised that is still not a thing. I have created an issue for that https://youtrack.jetbrains.com/issue/WI-47023 You can vote for it if you're interested

1
Comment actions Permalink

There's a handy action `Ctrl+Shift+J`, which joins following lines into the one with the cursor. It's not exactly a toggle, and only works one way (joining), but it's better than nothing.

11
Comment actions Permalink

Ah, Ctrl+Shift+J that is handy.  Still would be really nice to have the full feature, especially with the option to wrap around at the right-margin.  This is probably #1 on the list of repetitive actions that I have to do manually all the time.  

3
Comment actions Permalink

@Clement Baconnier The issue you created was only for PHPStorm.  This thread is about Javascript/Webstorm.  Unfortunately the feature was only implemented for PHP, not JS.  They want a separate issue for each language.  Here is the 8 year old issue for the JS feature.  Please go vote for it!

https://youtrack.jetbrains.com/issue/WEB-1364

0
Comment actions Permalink

Vladimir One could just do Ctrl+Z or Cmd+Z to do the opposite. There you have your semi-toggle.

-3
Comment actions Permalink

For 'long into wide' you can add a nice key binding to clone caret (https://www.jetbrains.com/help/rider/Multicursor.html#add-delete-clone-caret)

Once you've done that, clone a caret for each line in the list, navigate to the end of all lines simultaneously and hit backspace to collapse it onto one line.

Frustratingly it's a one way operation

0
Comment actions Permalink

I began using the Realigner plugin for this purpose.

 

I had some trouble with the shortcut key for split (Ctrl+Alt+S) on Ubuntu 20.10. I just went ahead and used the functions directly from the menu. They are located under the `Edit` tab.

1
Comment actions Permalink

If it is still actual, I found another solution.

So, switch to single line is pretty simple, select lines and press ctrl + shift + j (already discussed here). 

To split a single-line object follow the steps:

  • select the first comma
  • press alt + ctrl + shift + j => it selects all commas in current line
  • press , (comma) => this replaces the current commas with new ones
  • hit 'Enter' => this add's a linebreak after each comma
  • (optional): press alt + ctrl + L => reformat code

Hopefully this method will help other people looking for a similar solution. 

 
 
 
 
 
5
Comment actions Permalink

Vitaly's solution (or a slight variant of it) works great for a similar situation. In working with Vue.js, sometimes the attributes inside html tags start to build up and I want to move them to separate lines for readability. You can select the spaces in between the attributes and press Enter/Return, and bingo!. I've been looking for an easy way to do this for long time!

0
Comment actions Permalink

This works for method signatures:

  1. Select the args (just the args)
  2. Hover over the selection
  3. A yellow bulb should eventually show; click it
  4. Select "Put arguments on one line"
  5. Add shortcut (image shows edit because I have a shortcut already)
  6. To do the reverse, repeat the previous steps with expanded args, and then select "Put arguments on one line"





0

Please sign in to leave a comment.