HTML attributes on new lines quick key in PHPStorm/Webstorm

I've searched for this, but couldn't find it (or maybe I just don't know exactly what to search for).

When I have this html code in PHPStorm:

<input type="text" id="name" name="name" class="form-control">

When the attributes list gets too long I manually press return 4 times (in this case) to put each attribute on it's own line to have this result: 

<input 
type="text"
id="name"
name="name"
class="form-control">

Is there a shortcut for this? This happens so often that it would save me a lot of time in the end..

7 comments
Comment actions Permalink

Ah, that's a shame. Would be really helpful..

Without making any promises: I'm now going to try to create my first Intellij Plugin to achieve this. Since it's my first time I don't know if I'll succeed and if it's possible, but it will be a nice learning opportunity nonetheless.

If I do succeed I will post a link to the plugin here of course.

1
Comment actions Permalink

It's far from finished, but I wanted to post a very early version of the plugin here. I don't have any more time to work on it today and I don't know when I will, but the base of the plugin is working.

You can install this version by going to 'PhpStorm' > 'Preferences' > 'Plugins' > cog icon > 'install plugin from disk' and then selecting the zip file. The quick key to wrap attributes on a new line is "shift+meta+w" or just double press shift and search for 'wrap lines'.

Download the zip here: https://drive.google.com/open?id=1TdxnexQzg78hW5whSZWdwYovqHiC2M75 

TODOs

  • Better title and description
  • Nested HTML elements should have right indentation
  • Write tests
  • Should the contents of the HTML tag also be on a new line? (+ add options to configure this)
  • HTML code inside a variable should also work (nice to have and on a per language basis)
  • Maybe do the opposite (unwrap lines)

 

1
Comment actions Permalink

The plugin is now at version 1.0. I've added it to the Intellij plugin repository and it's currently pending approval. 

The link to download the latest version is: https://drive.google.com/open?id=1P_VGtOvURsWM3Ae7JMhItwb1vWV7FiTQ

If you want to look at the code, here's the repository: https://github.com/terrabythia/intellij_plugin_wrap_html_attributes

1
Comment actions Permalink

This can't be done using a shortcut unfortunately.

But you can configure this to be done always at File | Settings | Editor | Code Style | HTML - Other tab - change those dropdown options:

Wrap attributes: Wrap always

- New line before first attribute: When multiline.

0
Comment actions Permalink

I was just wanting to do this! I which this was available only for one selected block of text (or maybe just on the current block). I don't want to always do it, however when I want to do it, it would really be nice to have a shortcut.

0
Comment actions Permalink

Sander thank you so much for this! This is awesome. I do this manually so much and don't want to enforce the formatting restrictions on the entire HTML file. Huge appreciation!

0

Please sign in to leave a comment.