Emmet: ускорение набора HTML-кода

Расширение Emmet позволяет значительно ускорить набор кода, путем ввода специальной комбинации символов и нажатия клавиши <Tab>. Вместо этой комбинации будет вставлен фрагмент кода. Расширение не нуждается в отдельной установке, т. к. входит в состав компонентов редактора VS Code.

Примечание

Комбинации, заканчивающиеся на + (например, ul+), в редакторе VS Code не работают.

Вставка структуры HTML-документа

Для вставки структуры HTML-документа достаточно ввести восклицательный знак и нажать клавишу <Tab>. В результате будет вставлен код:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Внутри шаблона помечены точки останова, перемещаться между которыми можно с помощью клавиши <Tab>:

!<Tab>        => <Структура HTML-документа>
html:5<Tab>   => <Структура HTML-документа>
doc<Tab>      => <Структура HTML-документа без тега doctype>
html:xml<Tab> => <html xmlns="http://www.w3.org/1999/xhtml"></html>

Три восклицательных знака позволяют вставить тег <!doctype>:

!!!<Tab>      => <!DOCTYPE html>

В структуре HTML-документа в параметре lang тега <html> по умолчанию указывается код английского языка. Чтобы выводился код русского языка нужно в настройках редактора выполнить поиск параметра Emmet: Variables и указать значение ru для переменной lang или просто добавить следующий фрагмент кода в конец файла settings.json:

"emmet.variables": {
    "lang": "ru",
    "charset": "utf-8"
}

Результат после изменения значений переменных при вводе комбинации !<Tab>:

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Вставка HTML-комментария

Буква c позволяет вставить HTML-комментарий:

c<Tab>       => <!--  -->
cc:ie<Tab>   => <!--[if IE]><![endif]-->
cc:noie<Tab> => <!--[if !IE]><!--><!--<![endif]-->

Чтобы закомментировать блок кода, нужно предварительно его выделить, а затем в меню Правка выбрать пункт Переключить комментарий строки или нажать комбинацию клавиш <Ctrl>+</>. Повторное действие удаляет комментарий. Можно также выбрать пункт Переключить комментарий блока или нажать комбинацию клавиш <Shift>+<Alt>+<A>.

Теги из раздела HEAD

Комбинации для тега <meta>:

meta<Tab>        => <meta>
meta:desc<Tab>   => <meta name="description" content="">
meta:kw<Tab>     => <meta name="keywords" content="">
meta:compat<Tab> => <meta http-equiv="X-UA-Compatible" content="IE=7">
meta:edge<Tab>   => <meta http-equiv="X-UA-Compatible" content="ie=edge">
meta:redirect<Tab> => 
   <meta http-equiv="refresh" content="0; url=http://example.com">
meta:utf<Tab>      => 
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
meta:vp<Tab>       => 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

Комбинации для тега <link>:

link<Tab>          => <link rel="stylesheet" href="">
link:css<Tab>      => <link rel="stylesheet" href="style.css">
link:favicon<Tab>  => 
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
link:im<Tab>       => <link rel="import" href="component.html">
link:import<Tab>   => <link rel="import" href="component.html">
link:manifest<Tab> => <link rel="manifest" href="manifest.json">
link:mf<Tab>       => <link rel="manifest" href="manifest.json">
link:print<Tab> => <link rel="stylesheet" href="print.css" media="print">
link:rss<Tab>   => 
   <link rel="alternate" href="rss.xml" type="application/rss+xml"
         title="RSS">
link:touch<Tab> => <link rel="apple-touch-icon" href="favicon.png">
link:atom<Tab>  => 
   <link rel="alternate" href="atom.xml" type="application/atom+xml"
         title="Atom">

Комбинации для тега <script>:

script<Tab>     => <script></script>
script:src<Tab> => <script src=""></script>

Комбинация для тега <base>:

base<Tab>       => <base href="">

Основные теги из раздела BODY

При вводе названий тегов, не имеющих отдельных комбинаций, получим открывающий и закрывающий тег:

div<Tab>    => <div></div>
span<Tab>   => <span></span>
p<Tab>      => <p></p>

Для некоторых тегов генерируются параметры, а также учитывается, является ли тег парным или одинарным:

abbr<Tab>   => <abbr title=""></abbr>
area<Tab>   => <area shape="" coords="" href="" alt="">
area:c<Tab> => <area shape="circle" coords="" href="" alt="">
area:d<Tab> => <area shape="default" coords="" href="" alt="">
area:p<Tab> => <area shape="poly" coords="" href="" alt="">
area:r<Tab> => <area shape="rect" coords="" href="" alt="">
audio<Tab>  => <audio src=""></audio>
br<Tab>     => <br>
map<Tab>    => <map name=""></map>
marquee<Tab> => <marquee behavior="" direction=""></marquee>
video<Tab>   => <video src=""></video>

Комбинации для тега <a>:

a<Tab>       => <a href=""></a>
a:link<Tab>  => <a href="http://"></a>
a:mail<Tab>  => <a href="mailto:"></a>
a:tel<Tab>   => <a href="tel:+"></a>
a:blank<Tab> => 
   <a href="http://" target="_blank" rel="noopener noreferrer"></a>

Комбинации для вставки изображений:

img<Tab>        => <img src="" alt="">
img:s<Tab>      => <img src="" alt="" srcset="">
img:srcset<Tab> => <img src="" alt="" srcset="">
ri:d<Tab>       => <img src="" alt="" srcset="">
ri:dpr<Tab>     => <img src="" alt="" srcset="">
img:sizes<Tab>   => <img src="" alt="" sizes="" srcset="">
img:z<Tab>       => <img src="" alt="" sizes="" srcset="">
ri:v<Tab>        => <img src="" alt="" sizes="" srcset="">
ri:viewport<Tab> => <img src="" alt="" sizes="" srcset="">
pic<Tab>         => <picture></picture>
src<Tab>         => <source>
source<Tab>      => <source>
src:m<Tab>        => <source media="(min-width: )" srcset="">
source:media<Tab> => <source media="(min-width: )" srcset="">
src:mz<Tab>       => 
   <source media="(min-width: )" srcset="" sizes="">
source:media:sizes<Tab> => 
   <source media="(min-width: )" srcset="" sizes="">
src:mt<Tab>            => 
   <source media="(min-width: )" srcset="" type="image/">
source:media:type<Tab> => 
   <source media="(min-width: )" srcset="" type="image/">
src:z<Tab>             => <source sizes="" srcset="">
source:sizes<Tab>      => <source sizes="" srcset="">
src:zt<Tab>            => <source sizes="" srcset="" type="image/">
source:sizes:type<Tab> => <source sizes="" srcset="" type="image/">
src:sc<Tab>            => <source src="" type="">
source:src<Tab>        => <source src="" type="">
src:s<Tab>             => <source srcset="">
source:srcset<Tab>     => <source srcset="">
src:t<Tab>             => <source srcset="" type="image/">
source:type<Tab>       => <source srcset="" type="image/">
ri:a<Tab> или ri:art<Tab> => 
   <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
   </picture>
ri:t<Tab> или ri:type<Tab> => 
   <picture>
      <source srcset="" type="image/">
      <img src="" alt="">
   </picture>

В следующих случаях можно использовать сокращенные названия тегов:

mn<Tab>         => <main></main>
hdr<Tab>        => <header></header>
sect<Tab>       => <section></section>
art<Tab>        => <article></article>
ftr<Tab>        => <footer></footer>

adr<Tab>        => <address></address>
bq<Tab>         => <blockquote></blockquote>
emb<Tab>        => <embed src="" type="">
fig<Tab>        => <figure></figure>
figc<Tab>       => <figcaption></figcaption>
ifr<Tab>        => <iframe src="" frameborder="0"></iframe>
iframe<Tab>     => <iframe src="" frameborder="0"></iframe>
str<Tab>        => <strong></strong>

det<Tab>           => <details></details>
det>summary+p<Tab> => 
   <details>
      <summary></summary>
      <p></p>
   </details>

Добавление текста

После вставки шаблона тега без параметров текстовый курсор будет расположен перед закрывающим тегом, что позволяет сразу начать набор текста:

p<Tab>        => <p>{Курсор}</p>

Текст можно также добавить в составе комбинации внутри фигурных скобок:

p{Текст}<Tab> => <p>Текст</p>
p{Текст1 }>a{ссылка}+{ текст2}<Tab> => 
   <p>Текст1 <a href="">ссылка</a> текст2</p>

Если в составе текста указать символ $, то вместо него будет подставлен порядковый номер элемента. Создадим три абзаца и пронумеруем их:

p*3>{Абзац $}<Tab> => 
   <p>Абзац 1</p>
   <p>Абзац 2</p>
   <p>Абзац 3</p>

Если указать несколько символов $ подряд, то перед номером добавятся нули:

p*3>{Абзац $$$}<Tab> => 
   <p>Абзац 001</p>
   <p>Абзац 002</p>
   <p>Абзац 003</p>

По умолчанию нумерация элементов начинается с 1. После символа @ можно указать другой начальный номер, например, 3:

p*3>{Абзац $@3}<Tab> => 
   <p>Абзац 3</p>
   <p>Абзац 4</p>
   <p>Абзац 5</p>

Для вставки текста-заполнителя следует ввести слово lorem после которого можно указать количество генерируемых слов (задавать количество слов необязательно). Создадим три абзаца и добавим в них по пять слов:

p*3>lorem5<Tab> => 
   <p>Lorem ipsum dolor sit amet.</p>
   <p>Eligendi commodi sit temporibus. Doloribus?</p>
   <p>Rem dignissimos eum consectetur molestias.</p>

После слова lorem можно указать код языка. Сгенерируем текст на русском языке:

p>loremru20<Tab> => 
   <p>Далеко-далеко за словесными горами в стране гласных и согласных
   живут рыбные тексты. Ручеек безопасную, встретил маленький раз гор
   lorem назад. Свою, которой?</p>

Не пытайтесь найти смысл во вставленном тексте. Основная цель lorem показать заказчику, как будет выглядеть дизайн сайта с произвольным текстом.

Добавление параметров тегов

Если указать только CSS-селектор стилевого класса или идентификатора, то будет создан тег <div> с переданным стилевым классом или идентификатором:

.row<Tab>           => <div class="row"></div>
.row.mb-3<Tab>      => <div class="row mb-3"></div>
#div1<Tab>          => <div id="div1"></div>
#div1.row<Tab>      => <div id="div1" class="row"></div>

Чтобы добавить эти параметры в другой тег, предварительно указываем его название:

p.text-center<Tab>  => <p class="text-center"></p>

Если эти параметры вкладываются в блочный тег, то они добавляются к тегу <span>:

p>.text-center<Tab> => <p><span class="text-center"></span></p>

или к другим вложенным тегам в зависимости от родительского элемента:

ul>.item<Tab>       => 
   <ul>
      <li class="item"></li>
   </ul>
table>.row>.col<Tab> => 
   <table>
      <tr class="row">
         <td class="col"></td>
      </tr>
   </table>

Для добавления произвольных параметров, их следует указывать внутри квадратных скобок. Значение параметра задается после символа = внутри одинарных или двойных кавычек. Если значение не содержит пробела, то кавычки можно не указывать. Если параметр не содержит значения, то достаточно вставить только название параметра:

p[title="Подсказка" class=p$]*2<Tab> => 
   <p title="Подсказка" class="p1"></p>
   <p title="Подсказка" class="p2"></p>
p[title]<Tab> => <p title=""></p>

Формы и элементы управления

Для вставки формы и элементов управления используются следующие комбинации символов:

form<Tab>           => <form action=""></form>
form:get<Tab>       => <form action="" method="get"></form>
form:post<Tab>      => <form action="" method="post"></form>

label<Tab>          => <label for=""></label>

input:b<Tab>        => <input type="button" value="">
input:button<Tab>   => <input type="button" value="">
input:reset<Tab>    => <input type="reset" value="">
input:s<Tab>        => <input type="submit" value="">
input:submit<Tab>   => <input type="submit" value="">
btn<Tab>            => <button></button>
button<Tab>         => <button></button>
btn:r<Tab>          => <button type="reset"></button>
button:r<Tab>       => <button type="reset"></button>
button:reset<Tab>   => <button type="reset"></button>
btn:s<Tab>          => <button type="submit"></button>
button:s<Tab>       => <button type="submit"></button>
button:submit<Tab>  => <button type="submit"></button>
btn:d<Tab>           => <button disabled="disabled"></button>
button:d<Tab>        => <button disabled="disabled"></button>
button:disabled<Tab> => <button disabled="disabled"></button>

tarea<Tab>    => <textarea name="" id="" cols="30" rows="10"></textarea>
textarea<Tab> => <textarea name="" id="" cols="30" rows="10"></textarea>

input<Tab>          => <input type="text">
inp<Tab>            => <input type="text" name="" id="">
input:t<Tab>        => <input type="text" name="" id="">
input:text<Tab>     => <input type="text" name="" id="">
input:p<Tab>        => <input type="password" name="" id="">
input:password<Tab> => <input type="password" name="" id="">
input:url<Tab>      => <input type="url" name="" id="">
input:email<Tab>    => <input type="email" name="" id="">
input:tel<Tab>      => <input type="tel" name="" id="">
input:number<Tab>   => <input type="number" name="" id="">
input:search<Tab>   => <input type="search" name="" id="">
input:date<Tab>     => <input type="date" name="" id="">
input:time<Tab>     => <input type="time" name="" id="">
input:datetime<Tab> => <input type="datetime" name="" id="">
input:datetime-local<Tab> => <input type="datetime-local" name="" id="">
input:month<Tab>    => <input type="month" name="" id="">
input:week<Tab>     => <input type="week" name="" id="">
input:h<Tab>        => <input type="hidden" name="">
input:hidden<Tab>   => <input type="hidden" name="">
datal<Tab>          => <datalist></datalist>

select<Tab>   => <select name="" id=""></select>
select:d<Tab> => <select name="" id="" disabled="disabled"></select>
select:disabled<Tab> => 
   <select name="" id="" disabled="disabled"></select>
opt<Tab>      => <option value=""></option>
option<Tab>   => <option value=""></option>
optg<Tab>     => <optgroup></optgroup>
optgroup<Tab> => <optgroup></optgroup>
select>option*3<Tab> => 
   <select name="" id="">
      <option value=""></option>
      <option value=""></option>
      <option value=""></option>
   </select>

input:c<Tab>        => <input type="checkbox" name="" id="">
input:checkbox<Tab> => <input type="checkbox" name="" id="">
input:r<Tab>        => <input type="radio" name="" id="">
input:radio<Tab>    => <input type="radio" name="" id="">

input:f<Tab>        => <input type="file" name="" id="">
input:file<Tab>     => <input type="file" name="" id="">
input:i<Tab>        => <input type="image" src="" alt="">
input:image<Tab>    => <input type="image" src="" alt="">
input:range<Tab>    => <input type="range" name="" id="">
input:color<Tab>    => <input type="color" name="" id="">
prog<Tab>           => <progress></progress>

fst<Tab>            => <fieldset></fieldset>
fset<Tab>           => <fieldset></fieldset>
fst:d<Tab>          => <fieldset disabled="disabled"></fieldset>
fset:d<Tab>         => <fieldset disabled="disabled"></fieldset>
leg<Tab>            => <legend></legend>
legend<Tab>         => <legend></legend>

Таблицы

Для быстрой вставки таблиц, строк и ячеек можно использовать такие комбинации:

table<Tab>           => <table></table>
cap<Tab>             => <caption></caption>
tr<Tab>              => <tr></tr>
th<Tab>              => <th></th>
td<Tab>              => <td></td>
thead<Tab>           => <thead></thead>
tbody<Tab>           => <tbody></tbody>
tfoot<Tab>           => <tfoot></tfoot>
colg<Tab>            => <colgroup></colgroup>
col<Tab>             => <col>
table>tr*2>td*2<Tab> => 
   <table>
      <tr>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
thead>tr>th*2<Tab> => 
   <thead>
      <tr>
         <th></th>
         <th></th>
      </tr>
   </thead>

Списки

Для быстрой вставки списков можно использовать следующие комбинации:

ul<Tab>      => <ul></ul>
ol<Tab>      => <ol></ol>
li<Tab>      => <li></li>
ul>li*3<Tab> =>
   <ul>
      <li></li>
      <li></li>
      <li></li>
   </ul>
ul>li*3>{Пункт $}<Tab> => 
   <ul>
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>Пункт 3</li>
   </ul>
ol>.item$*3<Tab> => 
   <ol>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
   </ol>

dl<Tab>           => <dl></dl>
dt<Tab>           => <dt></dt>
dd<Tab>           => <dd></dd>
dl>(dt+dd)*2<Tab> => 
   <dl>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
   </dl>

Вставка сразу нескольких тегов

Чтобы вставить несколько одинаковых тегов друг за другом, следует добавить символ *, после которого указать количество повторов. Вставим три абзаца и пронумеруем их:

p*3>{Абзац $}<Tab> => 
   <p>Абзац 1</p>
   <p>Абзац 2</p>
   <p>Абзац 3</p>

Символ > означает, что нужно выполнить вложение внутрь тега. В предыдущем примере мы вкладывали текст. Вложим пункт внутрь списка:

ul>li<Tab> => 
   <ul>
      <li></li>
   </ul>

Символ + добавляет элемент после текущего элемента:

div+p+ul>li*3<Tab> => 
   <div></div>
   <p></p>
   <ul>
      <li></li>
      <li></li>
      <li></li>
   </ul>

Как видно из примера, можно комбинировать символы *, > и +, создавая сложные структуры. В последнем подвыражении мы вставляли пункты внутрь списка. Если попробовать в конец выражения вставить символ + и тег, то это тег будет вставлен после тега <li>. Как же нам вставить тег после списка? Чтобы переместиться выше по дереву на один уровень нужно указать символ ^:

ul>li*3^div<Tab> => 
   <ul>
      <li></li>
      <li></li>
      <li></li>
   </ul>
   <div></div>

Чтобы переместиться на несколько уровней выше, следует символ ^ указать несколько раз:

div>p>span+i^^div<Tab> => 
   <div>
      <p><span></span><i></i></p>
   </div>
   <div></div>

Можно также ограничить вложение, добавив группу внутрь круглых скобок:

(div>p>span+i)+div<Tab> => 
   <div>
      <p><span></span><i></i></p>
   </div>
   <div></div>

Редактор Visual Studio Code
Подробное описание руководства по редактору Visual Studio Code (PDF)

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов