Automatically add attributes to HTML tag

Hi!

Is there a way to automatically add certain attributes to certain HTML tags in PHPStorm? For example, I want to all <img> tags to have 

loading="lazy" decoding="async"

by default, but at the moment I need to input them manually. Can I somehow setup PHPStorm, so that those tags are added automatically when the tag is "autocompleted" for example?

Thank you.

4 comments
Comment actions Permalink

I guess in your case Live Templates should do the trick:
https://www.jetbrains.com/help/phpstorm/2022.1/settings-live-templates.html

Something like:

<img loading="lazy" decoding="async">$SELECTION$</img>

And abbrevation like "im".

0
Comment actions Permalink

Yes, thank you, it does seem to work. Is it possible to edit native autocompletion, though? The one suggested with this:


I am curious about this, since otherwise it kind of means that I have 2 very similar suggestions, which may be confusing, if I forget about the difference for some reason.

0
Comment actions Permalink

@Dmitry Kustov

You cannot redefine the inserted code for HTML tags.

But if you use Emmet, then you can change the code that gets inserted... as all standard Emmet abbreviations in IDEA-based IDEs (PhpStorm/WebStorm/etc) are implemented using the already mentioned Live Templates functionality, which means that you can change that code.

https://docs.emmet.io/cheat-sheet/

  • Just type img[TAB] (instead of your <img ) to have Emmet doing its magic ([TAB] is the default expand key, could also be [Enter] or some other; check your PhpStorm settings).
  • Live Templates for HTML abbreviations can be found under the Zend HTML group on Live Templates screen; Zend CSS would be for CSS abbreviations.
0
Comment actions Permalink

Got it. Thank you.

0

Please sign in to leave a comment.