Use Emmet abbreviations in PhpStorm

Link copied

Attach video time

PhpStorm has built-in support for Emmet abbreviations. Emmet lets you type a short abbreviation that expands into HTML, which saves time when you create elements, attributes, lists, and placeholder text.

For example, type .container in an HTML file and expand it with the Emmet shortcut:

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

You can also combine selectors to create more specific markup. A ul followed by #mylist creates an unordered list with an id of mylist. Use > to nest another element, and * to repeat it. For example, this abbreviation creates an unordered list with three list items:

ul#mylist>li*3

Expanding it produces:

<ul id="mylist">
    <li></li>
    <li></li>
    <li></li>
</ul>

If you aren’t sure what an abbreviation will generate, enable the preview. Open PhpStorm -> Preferences, select Editor, and expand Emmet. Open the HTML section and enable Abbreviation preview.

The main Emmet settings also let you change the key used to expand an abbreviation. Change the expansion key from Tab to Enter, then click OK.

Emmet includes special abbreviations for common document structures. For example, html:5 generates a complete HTML document:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

The preview shows the generated structure as you type, so you can see the result before expanding the abbreviation. For example, create a .container div holding an unordered list with an id of 3 and five items, and add placeholder text with lorem10:

.container>ul#3>li*5>lorem10

When you expand it, Emmet generates five list items, each containing ten words of lorem ipsum text:

<div class="container">
    <ul id="3">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, repellendus.</li>
        <li>Consectetur ipsum minima quibusdam sapiente sed? Ipsa qui quidem vel.</li>
        <li>Debitis excepturi ipsam neque, nesciunt pariatur possimus quae recusandae soluta?</li>
        <li>Assumenda dolore eos ipsam laudantium molestias praesentium, quia veritatis! Nisi!</li>
        <li>Architecto asperiores cupiditate earum minus perferendis porro praesentium quae, quam.</li>
    </ul>
</div>

The exact placeholder words can vary, but the 10 in lorem10 limits the generated text to ten words.

You can use Emmet in CSS files and JSX files as well as HTML files. Check the Emmet documentation when you need a less familiar abbreviation or want to see which elements and attributes are available.

Using Emmet abbreviations saves a significant amount of time when you type HTML elements, attributes, repeated structures, and placeholder text.