Emmet + Visual Studio Code 为您提供闪电般快速的 HTML 编码的黄金体验，激发您的无所不能的感觉。

你好。
我是Mandai，负责Wild 开发团队。

你知道艾美特是什么吗？
对于那些通常不编写 HTML 或 CSS 代码的人来说，Emmet 可能并不熟悉，但它在该领域作为加速 HTML/CSS 编码的工具而闻名。

但是，为了使用 Emmet，您需要使用支持 Emmet 的编辑器，不幸的是它不能与记事本一起使用。

今天，我将使用我推荐的Visual Studio Code（以下简称VSCode）轻松为Emmet准备一个执行环境，让您体验Emmet的强大。

您可能想要编写不必要的 HTML 和 CSS，这是可以理解的。

首先，准备VSCode。

VSCode 是由 Microsoft 开发的免费开源软件，源自 Visual Studio。

Visual Studio Code - 重新定义代码编辑。

当您访问上述站点时，会根据您的环境提供安装包的链接，因此请下载并安装。
安装过程非常简单，这里就不再赘述了。

安装完成后，Emmet执行环境就准备好了！
VSCode 本身是一个轻量级编辑器，允许你通过准备扩展来用任何语言进行编写，所以我强烈推荐它。
它的名称为 VisualStudio，IntelliSense 体验令人印象深刻，赋予它 Eclipse 所缺乏的轻松感。

有关这方面的更多信息，和Alt | Beyond Co., Ltd.有关如何使用 Visual Studio Code 加速书签创建的文章 | Summary of Visual Studio Code Shorts | 。出色地。

 

埃米特的开始

首先，让我们使用 Emmet 组装一些简单的 HTML。

使用“CTRL + N”创建一个新页面，并使用“CTRL + S”立即保存。
文件名可以是任何名称，但扩展名应该是 html。

现在你已经准备好了。

立即尝试输入半角字符“！”。

别着急。
输入 ! 后，慢慢按 TAB 键。

然后它会看起来像这样。

你可以很容易地想象“！”这样扩展，编码速度变得令人难以承受。

埃米特不是这样的！
生成列表也非常容易。

让我们创建一个列表，该列表在 ul 和 li 标签之间具有父子关系，并且有四个 li 标签。
以下是我添加到之前创建的 HTML 中的作品的 GIF。

只需编写“ul>li*4”，您就可以创建一个包含四个 li 标签的 ul 标签。

如果您已经走到这一步，您可能已经知道如何处理 ID 和 CLASS 了。

如果你了解这么多，我想你会认为这是一个非常有用的人。

接下来，我们一次性编写 dl 标签、dt 和 dd 标签。
dt 和 dd 标记被写为同级元素，而不是父元素和子元素，这正如您想象的那样。

它还可以进行适当的缩进。在本视频中，我使用 4 个空格的设置创建了它，但您也可以通过更改 VSCode 本身的设置切换到 2 个空格或制表符。

作为一个技巧，如果在写入破折号后不在最后一个元素后面添加“>”，它可能不会按预期转换，所以要小心。

你有没有感觉到全身上下都充满了无所不能的感觉？

 

Emmet 不仅仅适用于 HTML！

据我所知，Emmet 可以以光速创建 HTML。
但埃米特并不是唯一能做到这一点的孩子。
他是一个了不起的人，CSS 写得非常好！

然而CSS的属性太多，所以很多情况下它的用处并不是很大。
显示、边距、边框等常用区域都设置了缩写，因此应尽可能使用它们。

在此处备忘单，因此请尝试仅记住您经常使用的备忘单。
据说有500多个，很难记住，所以如果你有那样的内存空间，你会想用在别的地方。

然而，我认为值得记住的一件事是如何编写“margin: 0 auto;”，它没有包含在备忘单中，但经常使用。

看来你可以使用“m0-auto”！

CSS 似乎还可以使用“+”同时扩展多个属性。
是这样的！

原始字符串不再是密码。
如果你对它进行严格的操作和编码，它可能会让你感到很沮丧。

Emmet（ZenCoding）本身并不是一个新工具，但我们必须密切关注 VSCode，它正贪婪地向其中融入功能。
我觉得它正在成为我离不开的编辑器。

就是这样。