div.header 👇
<divclass="header"></div>
```
- Add ID and CLASS attr
```html
form#search.info 👇
<formid="search"class="info"></form>
```
- Add multiple CLASS and ID attr
```html
p.info1.info2.info3#info
<pclass="info1 info2 info3"id='info'></p>
```
2. ELEMENT WITH CHILD and MULTIPLICATION
- Add child element to a parent element
````html
ul>li 👇
<ul><li></li></ul>
```
- Add multiple child elements
```html
ul>li*5 👇
<ul><li></li><li></li><li></li><li></li><li></li></ul>
```
3. ELEMENT with SIBLINGS
- Add html element next to another
```html
div+section+p 👇
<div></div><section></section><p></p>
```
4. HTML tag with TEXT
```html
a{Google} 👇
<header><ahref="">Google</a></header>
```
5. GROUPING
```html
div>(header>ul>li*2>a)+footer>p 👇
<div><header><ul><li><ahref=""></a></li><li><ahref=""></a></li></ul></header><footer><p></p></footer></div>
```
6. IMPLICIT TAG NAMES
- Adding multiple child element with same class
```html
ul>.item👇
<ul><liclass="item"></li></ul>
```
```html
table>.row>.col*3 👇
<table><trclass="row"><tdclass="col"></td><tdclass="col"></td><tdclass="col"></td></tr></table>
```
7. ITEM NUMBERING
- Adding numbered class names to child elements
```html
ul>li.item$*5
<ul><liclass="item1"></li><liclass="item2"></li><liclass="item3"></li><liclass="item4"></li><liclass="item5"></li></ul>
```
##Thank you for following✨
What other VSCODE shortcut can you suggest?
comment below👇👇
In this white paper, we lay out a DevSecOps maturity model based on our experience helping thousands of organizations advance their DevSecOps practices. Learn the key competencies and practices across four distinct levels of maturity.
Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.
Top comments (3)
These are not VSCode shortcuts, they are emmet snippets
Thank you 👍
Yup... Emmet has been around longer than VS Code - and is available in many IDEs