TIL | [React] VS Code 댕꿀기능 알려주는 사람이 없어서 내가 알랴줌

[241226 목요일]

이멧? 에밋? : Emmet

VS Code를 사용하다보면 이렇게 코드를 빠르게 완성시켜주는 옵션이 자동으로 뜬다. 옵션들 오른쪽 끝을 보면 'Emmet'이라는 것이 보이는데, 보이는것 외에도 코드를 순식간에 만들어주는 작성방법이 있더라!
왜..코린인이에게..아무도..알려주지 않는 것인가?

그래서 내가 보려고 잘 사용할 것 같은 방법 몇가지 기록하기!

하위 요소 만들기 '>'

div>ul>li → tab

• 결과

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

형제 요소 만들기 '+'

div>ul+ol → tab

• 결과

<div>
  <ul></ul>
  <ol></ol>
</div>

반복해서 만들기 '*'

div>ul>li*3 → tab

• 결과

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

그룹화 '()'

div>ul>(li>a)*3 → tab

• 결과

<div>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

'.class 명' 넣기

div.container → tab // div를 생략하고 .container 로 작성해도된다.

• 결과

<div class="container"></div>

'#id 명' 넣기

span#item → tab

• 결과

<span id="item"></span>

넘버링 '$'

ul>li.item$*5 → tab

• 결과

<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
</ul>

이정도는 유용하게 많이 사용할것 같다.