Сниппеты кода и Emmet в VS Code

Сниппет - заготовка кода, которую редактор вставляет по короткому слову или команде. Он помогает быстрее писать повторяющиеся конструкции и не набирать их каждый раз с нуля.

Каркас страницы за один знак

В VS Code для HTML уже встроен Emmet. Он разворачивает короткие записи в разметку. Например, ! разворачивается в основу HTML-документа.

1. Откройте пустой файл index.html.
2. Убедитесь, что VS Code распознал его как HTML.
3. Введите ! и выберите подсказку Emmet Abbreviation.
4. Нажмите Enter. Редактор вставит каркас документа.

Если подсказка не появилась, вызовите её сочетанием Ctrl+Space. Можно также выполнить команду Emmet: Expand Abbreviation через палитру команд VS Code.

После вставки проверьте результат и замените примерный заголовок страницы на свой. Emmet ускоряет ввод, но не знает, какой текст нужен именно вашей странице.

Короткая запись для списка

Emmet умеет разворачивать и более подробные сокращения. Например, ul>li*3 означает маркированный список с тремя пунктами:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

В записи знак > означает вложенный элемент, а *3 просит повторить его три раза. Введите сокращение в HTML-файле, выберите подсказку Emmet и раскройте её, чтобы получить разметку.

Сниппет и Emmet - в чём разница

Сниппет - готовый фрагмент, который редактор вставляет вместо короткого триггера. Emmet понимает специальные сокращения вроде ! или ul>li*3 и строит из них разметку. В обоих случаях короткий ввод экономит время, но сгенерированный код всё равно нужно прочитать и при необходимости изменить.

В VS Code есть встроенные заготовки, а свои сниппеты можно создавать через команду Configure User Snippets. Подробнее: Emmet в VS Code и сниппеты в VS Code.