在 VSCode 中使用 Emmet 加速 HTML 代码编写。
介绍
2020年12月29日，我通过Zoom会议和大学好友以及我以前的教授进行了一次小型聚会。我的教授是迪基·阿里纳尔（Dicky Arinal ），他现在在Disney+工作。这次聚会让我想起了迪基教授（在印尼我们都叫他Pak）用Emmet软件展示他的“魔法”时的情景，当时我惊叹不已。不过，那时我们还在使用Visual Studio，因为他教的是ASP.NET，而要使用Zen Coding（Emmet的前身），我们需要安装Web Essentials。
埃米特是谁？
Emmet 是一款 Web 开发人员工具包，可以极大地改进您的 HTML 和 CSS 工作流程：”（https://docs.emmet.io/）
输入“！”+按“tab”键，搞定！
在 VSCode 中安装
2021年2月20日更新：
Emmet已内置于Visual Studio Code中。（感谢Dendi Hadian的评论）
缩写语法
嵌套运算符
元素：
只需输入任何不带尖括号的 HTML 元素，然后按 Tab 键，它就会自动生成 HTML 标签。
HTML
头部
<html></html>
<head></head>
兄弟姐妹+
h1+h2+p+btn
<h1></h1>
<h2></h2>
<p></p>
<button></button>
子>
表格>tr>td
<table>
<tr>
<td></td>
</tr>
</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>
分组()
（表格>tr>td）*2
<table>
<tr>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
</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#标题
p#注释
<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"]
输入[type="number" name="quantity" min="1" max="5"]
<input type="number" name="quantity" min="1" max="5">
内部文本{} => {text}
p{你好，世界}
<p>hello world</p>
在 VS Code 中为 JSX 启用 Emmet
- 打开你的 VS Code 设置或
⌘ + , - 在搜索设置中搜索 Emmet
- 在
Emmet: Include Languages“添加新项”部分（项：javascript，值：javascriptreact）。
