WebStorm autocomplete html code

Question

I'm searching for shortcut in WebStorm for auto completing my html code. So in my case if I write code like .row and press something it should automatically write <div class="row"></div>.

If you write div.row and hit Tab it will do it. Otherwise how is it supposed to know what element you want that class to be on? — jonrsharpe
– jonrsharpe, Commented Oct 23, 2016 at 17:16
Omg, yes tab does the trick. I was hitting everything else, just not tab. even if you write .class it writes you <div class="class"></div>. Write your answer and i will accept it! Thank you — Valor_
– Valor_, Commented Oct 23, 2016 at 17:18
@jonrsharpe "Otherwise how is it supposed to know what element you want that class to be on?" It's a standard behaviour of Emmet -- it will be a div tag with that class applied to it. — LazyOne
– LazyOne, Commented Oct 23, 2016 at 18:48
@Valor_ Tab is default .. but it can also be Enter or Space .. or even custom key of your choice -- Settings/Preferences | Editor | Emmet — LazyOne
– LazyOne, Commented Oct 23, 2016 at 18:50
@LazyOne oh cool, didn't know that. I thought it only worked tacked onto specific element names. — jonrsharpe
– jonrsharpe, Commented Oct 23, 2016 at 19:11

LazyOne · Accepted Answer · 2016-10-28 13:49:28Z

31

Such "transformation" (abbreviation expansion) called Emmet .. and by default it uses Tab key.

But it can also be Enter or Space .. or even custom key of your choice -- you can change it at Settings/Preferences | Editor | Emmet

P.S. For big chunks of code -- have a look at Live Templates (Code Snippets).

answered Oct 28, 2016 at 13:49

LazyOne

167k49 gold badges420 silver badges422 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tung Over a year ago

Btw, do you know how can we export these code snippets to back up or share them with others?

LazyOne Over a year ago

@Tung What "code snippets" exactly? If you are referring to the standard Emmet abbreviations.. then they are standard ones already (docs.emmet.io/cheat-sheet) so if your editor/IDE supports Emmet it should have them already. If standard Live Templates -- well, they are standard for IDE (bundled) so no need to share anything. For custom Live Templates that you can create yourself -- jetbrains.com/help/phpstorm/… -- they are stored intemplates subfolder.

Tung Over a year ago

Thank you for the link of abbreviations cheat sheet. It answers my question. If they were implemented by default, we don't need to save the configuration for them.

Jaied · Accepted Answer · 2021-01-31 14:58:35Z

10

You can use the Tab key to auto-complete the code. For example:

Write .row#row and press Tab key will make <div class="row" id="row"></div>.

I think this would help.

answered Jan 31, 2021 at 14:58

Jaied

99612 silver badges18 bronze badges

Collectives™ on Stack Overflow

WebStorm autocomplete html code

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related