Search code examples
phpstorm

PhpStorm - Use tab and Emmet to wrap code

I love emmet. div.container and then pressing tab has made my life so much easier.

But assume you have a div like this: <div class="myDiv"> </div> and you want to wrap that inside a container.

What I've been doing so far is typing out 

<div class="container">

</div>

Then I copy paste myDiv in between.

There has to be a simpler way, no?

What I'm looking for is being able to put my cursor in front of <div class="myDiv">, type out div.container then press tab, and the result would end up like this:

<div class="container">
    <div class="myDiv">
    </div>
</div>

Not even sure what the term for this would be. Searching for "phpstorm wrapping" doesn't give me what I need.

Is there a setting for this somewhere that I've missed?

Solution
    1. Select your text/code
    2. Code | Surround With... (or Code | Surround with Live Template... -- the menu will be almost the same for HTML context)
    3. Choose Emmet option in appeared popup
    4. Type your emmet sequence

    P.S. It's possible to assign custom shortcut to Surround with Emmet action so it can be called directly (one shortcut that would replace steps #2 and #3). This can be done in Settings/Preferences | Keymap -- just search for the aforementioned action (using search field).