7️⃣ VSCODE Shortcuts for Developers you should know Thread🧵

Атрибуты ID и CLASS

Добавить ID attr html-тега

div#info 👇
<div id="info"></div>

Войти в полноэкранный режим Выйти из полноэкранного режима

Добавить CLASS attr к html-тегу

div.header 👇
<div class="header"></div>

Войти в полноэкранный режим Выйти из полноэкранного режима

Добавить ID и CLASS attr

form#search.info 👇
<form id="search" class="info"></form>

Войти в полноэкранный режим Выйти из полноэкранного режима

Добавление нескольких CLASS и ID attr

p.info1.info2.info3#info
<p class="info1 info2 info3" id='info'></p>

Войти в полноэкранный режим Выйти из полноэкранного режима

Элемент с дочерним элементом и мультипликацией

Добавление дочернего элемента к родительскому элементу

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

Войти в полноэкранный режим Выход из полноэкранного режима

Добавление нескольких дочерних элементов

ul>li*5 👇
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Войти в полноэкранный режим Выход из полноэкранного режима

Элемент с родственными элементами
- Добавление html-элемента рядом с другим

div+section+p 👇
<div></div>
<section></section>
<p></p>

Войти в полноэкранный режим Выйти из полноэкранного режима

HTML-тег с ТЕКСТОМ

a{Google} 👇
<header> <a href="">Google</a> </header>

Войти в полноэкранный режим Выйти из полноэкранного режима

ГРУППИРОВКА

div>(header>ul>li*2>a)+footer>p 👇
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Войти в полноэкранный режим Выйти из полноэкранного режима

НЕЯВНЫЕ ИМЕНА ТЕГОВ
- Добавление нескольких дочерних элементов с одним и тем же классом

ul>.item👇
<ul>
    <li class="item"></li>
</ul>

Войти в полноэкранный режим Выход из полноэкранного режима

table>.row>.col*3 👇
<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>

Войти в полноэкранный режим Выход из полноэкранного режима

НУМЕРАЦИЯ ЭЛЕМЕНТОВ
Добавление пронумерованных имен классов к дочерним элементам

ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Войти в полноэкранный режим Выход из полноэкранного режима

Спасибо за внимание✨

Какие еще ярлыки VSCODE вы можете предложить?
комментируйте ниже👇👇👇