Более эффективный HTML с помощью VSCode Emmets

Привет, веб-разработчики! VSCode — действительно классная среда разработки с множеством функций. Сегодня мы рассмотрим одну из наиболее важных функций: сокращения Эммета! (Я буду называть их просто emmets :D) Emmets можно использовать на нескольких разных языках, но в этом блоге я покажу emmets в формате HTML.

Что такое Эмметы?

Emmets помогает быстрее писать код за счет сокращения выражений. Вы делаете небольшую вещь, нажимаете Enter, и она делает все за вас! Вам не нужно их загружать, это функция VSCode по умолчанию. Теперь начнем!

1. Создание элементов

<!-- Emmet -->
<!-- span (Don't forget to hit enter after writing this :D) -->

<!-- Result -->
<span>|</span>

2. Элемент со свойствами

<!-- Emmet -->
<!-- input[type=color] (just like css selectors) -->

<!-- Result -->
<input type="color">

3. Несколько элементов одновременно

<!-- Emmet -->
<!-- span*3 (multiplying operator) -->

<!-- Result -->
<span>|</span>
<span>|</span>
<span>|</span>

4. Дочерние элементы

<!-- Emmet -->
<!-- div>span -->

<!-- Result -->
<div>
  <span>|</span>
</div>

5. Несколько детей

<!-- Emmet -->
<!-- div>(span+p+h2) -->

<!-- Result -->
<div>
  <span>|</span>
  <p>|</p>
  <h2>|</h2>
</div>

6. Дайте классы элементу

<!-- Emmet -->
<!-- span.myClass -->

<!-- Result -->
<span class="myClass">|</span>

<!-- You can add multiple classes with span.class.anotherClass

7. Дайте идентификатор элементу

<!-- Emmet -->
<!-- span#myId -->

<!-- Result -->
<span id="myId">|</span>

<!-- You can add multiple classes with span#id#anotherId

8. Пустой раздел

<!-- Emmet -->
<!-- . -->

<!-- Result -->
<div class="|">|</div>

9. Пустой документ

<!-- Emmet -->
<!-- ! -->

<!-- Result -->
<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>

10. Несколько элементов

<!-- Emmet -->
<!-- div+p+h2 -->

<!-- Result -->
<div>|</div>
<p>|</p>
<h2>|</h2>

11. ДОКТИП HTML

<!-- Emmet -->
<!-- !!! -->

<!-- Result -->
<!DOCTYPE html>

С VSCode можно сделать еще много чего, но это все, что касается этого блога. Спасибо за прочтение, до свидания! :)

Более эффективный HTML с помощью VSCode Emmets