Emmet & vscode

murkgom·2020년 12월 30일

vscode에서는 기본적으로 emmet을 제공

공식 문서

Emmet Documentation(https://docs.emmet.io/abbreviations/syntax/)

사용법

기본 사용법

문법에 맞게 작성 후 [Tab]키 입력

<!-- 적용 전 -->
div>ul>li

<!-- tab 입력 후 -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

쓸만한 Operators

Sibling: +

div+p

<div></div>
<p></p>

Multiplication: *

ul>li*5

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

Id, Class

div#main+div.sub.sub2

<div id="main"></div>
<div class="sub sub2"></div>

Attributes

td[title="Hello World!" colspan=3]

<td title="Hello World!" colspan="3"></td>

Text: {}

button{클릭}

<button>클릭</button>

numbering: $, @

ul>li.item$$*3

<ul>
  <li class="item01"></li>
  <li class="item02"></li>
  <li class="item03"></li>
</ul>

ul>li.item$@3*5

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


ul>li.item$@-*3

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

JSP에서도 적용되도록 설정하기

https://www.reddit.com/r/vscode/comments/bj9h41/how_can_i_extend_an_existing_language_extension/

[File] - [Preferences] - [Settings]
"Emmet:Include Languages" 검색
[Item]에 jsp, [Value]에 html 입력 후 [Add Item]

html 문서 작성하기

<!-- 1. ! -->

<!DOCTYPE html>
<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>

<!-- 2. html -->

위와 동일