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..
请先登录再写评论。
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.
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.
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.
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
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
The plugin is approved and you can find it here: https://plugins.jetbrains.com/plugin/12766-wrap-html-attributes-on-new-lines
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!
@... 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?
@... Same here. Seems like an excellent plugin. I hope you have the possibility to resume the development of it, now in 2021.
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 @...'s code and I intend on continue to develop it further. Thank you @... for all your efforts and you are more than welcome to contribute to the repository if you feel like it!
Cristiano Fromagio That's good to hear. I'll definitely try it out in my next project!
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?
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.
as Rémy said, CMD + OPT + L already wrap attributes element in any fyle type, jsx, html e etc...
I have these options in my configuration, and I still can't get Vue files to reformat with attributes on their own lines. What could possibly be blocking this?
As far as I understand, you already set the "Wrap attributes" option to "Wrap always" in the Settings | Editor | Code Style | HTML dialog. If so, please call the "Reformat code" command explicitly(you can double press Shift, type "Reformat code" and choose this command). If formatting is not applied after this, please share a video that demonstrates the problematic behavior. Also, attach the problematic .vue file. I will examine it and follow up with you.