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..

13 comments
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.

2
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.

1
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.

2
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

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
Comment actions Permalink

Sander Bruggeman Just found this page and wanted to try your plugin, but PHPStorm reports that it isn't compatible with the current version. Is there an update available?

2
Comment actions Permalink

Sander Bruggeman Same here. Seems like an excellent plugin. I hope you have the possibility to resume the development of it, now in 2021.

0
Comment actions Permalink

Matt Ralston and Hewi0006 I've updated the plugin to 2020.3+ compatibility, you can download here https://plugins.jetbrains.com/plugin/16694-wrap-html-attributes-on-new-lines . This version is Sander Bruggeman's code and I intend on continue to develop it further. Thank you Sander Bruggeman for all your efforts and you are more than welcome to contribute to the repository if you feel like it!

0
Comment actions Permalink

Cristiano Fromagio That's good to hear. I'll definitely try it out in my next project!

0
Comment actions Permalink

Cristiano Fromagio Unfortunately this doesn't work in 2021.3, or more specifically, 2021.3.2. Any chance of adding compatibility with more recent versions?

0
Comment actions Permalink

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.

Then you can select the tag or line and reformat selected code with "options+command+L" or reformat complete file with "caps+options+command+L" on mac.

0

Please sign in to leave a comment.