CODEWITHSUNDEEP
phpstormkeyboard-shortcutswebstormemmet
user776686
user776686

Reputation: 8655

Wrap and inner-wrap HTML with Emmet

Using WebStorm or PhpStorm, is there any way to achieve the following productivity boost via Emmet or any other magic?

  1. Having some multiline text pasted from a text editor or email:

    Item 1
Item 2
Item 3
Item 4

    have each line wrapped in, say, <li>?

    <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>

  2. Having some <li> items,

    <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>

    inner-wrap the text with, say, <a href="#"> ... </a>?

    <li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>

I find myself in need of such a productivity boost, Emmet being my first suspect, but my attempts failed.

Upvotes: 2

Views: 3173

Answers (4)

Ivan Karaman
Ivan Karaman

Reputation: 1234

in php storm use:

CTRL + ALT + T

select emmet from menu and write code...

Upvotes: 2

Bangash
Bangash

Reputation: 1172

suppose you wanna have a <nav>, inside that wanna have <ul>, inside that wanna have an <li> tags for each item, inside every <li> you wanna have <a> tag (with href="#"). Every <a> tag wraps an item directly.

In Brackets + Emmet I do as follows,

Select the list of items, say

one
two
three
four
five
six

press ctrl+shift+a (this shortcut works in brackets, other editors may have another shortcut) to enter emmet's abbreviation mode, and type nav>ul>li>a[href="#"]* . The resulting code with be as follows

    <nav>
    <ul>
        <li>
            <a href="#">one</a>
            <a href="#">two</a>
            <a href="#">three</a>
            <a href="#">four</a>
            <a href="#">five</a>
            <a href="#">six</a>
        </li>
    </ul>
</nav>

Remember, * is important at the end of the abbreviation, otherwise emmet will think you wanna wrap all the items in a single <a> tag

Edit: If you put '*' after li not at the end (like this nav>ul>li*>a[href="#"]) you'll get more beautiful result as required in most cases, means every <a> will be wrapped in its own <li>.

<nav>
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
        <li><a href="#">five</a></li>
        <li><a href="#">six</a></li>
    </ul>
</nav>

Upvotes: 2

Igor Skoldin
Igor Skoldin

Reputation: 750

In PhpStorm 8 you can do this in such a way:

Code -> Surround with (you can use CTRL + SHIFT + T) -> Emmet. You'll get field where you can write ul>li* to get this task completed.

For achieving more productivity you need fast access to this tool. You can get it in a such way: Go to File -> Settings -> Keymap, find surround with Emmet (there is a search line) and add preferred keybord shortcut for this action.

Cheers!

Upvotes: 4

inkovic
inkovic

Reputation: 313

I only know how to do this is Sublime + Emmet, but:

For #1, select you raw multiline text.

  1. Hit Ctrl + Shift + L (Cmd on Mac) to separate each line as a selection

  2. Ctrl + Alt + Enter to enter abbreviation mode.

  3. Input li as the abbreveation, wrapping each line of content in a <li> tag.

    For #2

  4. Input li>a[href=#] as the abbreviation. I would recommend a simple li>a since the cursor will be there to input the correct url reference unless you can input a simple rule.

For note: Be sure to check your key-bindings, since you are explicitly using a different IDE than me, you'll need to know how to use Multiple cursor/line selections in PHPStorm etc (if it is possible).

Additionally, in this particular example it is important to note that the wrapped content will appear LAST.

This means something like li*3 would give you 12 items, with only 4 as content. The content will appear in the last item (every 4th item in this example) so just be careful with multiline line, multi cursor workflow.

Upvotes: 0

Related Questions