CODEWITHSUNDEEP
phpstorm
Pistachio
Pistachio

Reputation: 1652

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?

Upvotes: 1

Views: 317

Answers (2)

user3528269
user3528269

Reputation: 378

You don't need div.container. A simple .container does the job also. A div is automatically generated if you don't specify the element.
You can do nested elements with >. In your case it would be: .container>.myDiv. If you want to surround existing items, look at @LazyOne answer. The shortcut for it is [Ctrl] + [Alt] + j (on default settings at least).
For more information look here. (was just a quick google search for "emmet PHPstorm" but it looks good)

Upvotes: 1

LazyOne
LazyOne

Reputation: 165088

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

Upvotes: 3

Related Questions