VSCode에서 Emmet을 사용하여 HTML 코드 속도 향상
소개
2020년 12월 29일 줌미팅으로 대학친구들과 전교수님과 소소한 동창회를 가졌습니다. 저의 전임 교수는 Dicky Arinal 이며 현재 Disney+에서 일하고 있습니다. 동창회는 박디키(인도네시아에서는 박씨라고 부름)가 에멧으로 마술을 선보였던 기억이 나서 깜짝 놀랐다. 그러나 그 당시에는 그가 ASP.NET을 가르쳤기 때문에 여전히 Visual Studio를 사용하고 있었고 Emmet의 이전 이름인 Zen Coding을 사용하려면 Web Essentials를 설치해야 했습니다.
에밋이 뭐에요?
"Emmet은 HTML 및 CSS 작업 흐름을 크게 개선할 수 있는 웹 개발자용 툴킷입니다."( https://docs.emmet.io/ )
유형 "!"+ "탭"을 누르면 붐!
VSCode에 설치
2021년 2월 20일에 업데이트됨
Emmet은 Visual Studio 코드에 내장되어 있습니다. (댓글 감사합니다)
약어 구문
중첩 연산자
집단
<> 없이 HTML 요소를 입력하고 탭을 누르면 자동으로 HTML 태그가 생성됩니다.
html
head
<html></html>
<head></head>
형제자매 +
h1+h2+p+btn
<h1></h1>
<h2></h2>
<p></p>
<button></button>
어린이 >
table>tr>td
<table>
<tr>
<td></td>
</tr>
</table>
등반 ^
table>tr>td^^ul>li
<table>
<tr>
<td></td>
</tr>
</table>
<ul>
<li></li>
</ul>
곱셈 *
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
그룹화()
(table>tr>td)*2
<table>
<tr>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
</table>
(table>tr>td)+ul>li
<table>
<tr>
<td></td>
</tr>
</table>
<ul>
<li></li>
</ul>
당신을 위한 도전 :)
emmet을 사용하여 이 HTML을 생성합니다.
<div>
<h1></h1>
</div>
<div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
div>h1^div>(table>(tr>td*3)*2)+ul>li*4
속성 연산자
id # => 요소#id
h1#heading
p#comment
<h1 id="heading"></h1>
<p id="comment"></p>
클래스 # => 요소#클래스
div.container
btn.btn.btn-primary
<div class="container"></div>
<button class="btn btn-primary"></button>
맞춤 속성 [] => [attr="value"]
input[type="number" name="quantity" min="1" max="5"]
<input type="number" name="quantity" min="1" max="5">
내부 텍스트 {} => {텍스트}
p{hello world}
<p>hello world</p>
vscode에서 jsx에 대한 emmet 활성화
⌘ + , Emmet: Include Languages 섹션에서 새 항목 추가(항목: javascript, 값: javascriptreact
Reference
이 문제에 관하여(VSCode에서 Emmet을 사용하여 HTML 코드 속도 향상), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/raaynaldo/speed-up-code-your-html-using-emmet-in-vscode-nesting-operators-201o텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
