Emmet + Visual Studio Code：带来闪电般快速的 HTML 编码体验，满足你的全能感

2016.12.20

大家好，
我是Mandai，Wild团队负责开发工作的成员。

你听说过Emmet吗？
对于不经常编写HTML或CSS代码的人来说，Emmet可能比较陌生，但它在HTML/CSS编码领域却是一款知名的加速工具。

但是，要使用 Emmet，您需要使用支持 Emmet 的编辑器；遗憾的是，它无法与记事本一起使用。

今天，我想使用我推荐的 Visual Studio Code（以下简称 VSCode）来轻松设置 Emmet 执行环境，让您体验 Emmet 的强大功能。

你肯定会想编写一些不必要的 HTML 和 CSS 代码。

VSCode 是由微软开发的免费开源软件，是 Visual Studio 的继任者。

访问上述网站后，您会找到适用于您环境的安装包链接。请下载并安装相应的安装包。
安装过程非常简单，因此我们在此省略细节。

安装完成后，Emmet 执行环境就搭建好了！
VS Code 本身是一款轻量级编辑器，只要安装了必要的扩展，就可以运行任何语言的编辑器，所以我强烈推荐它。
正如 Visual Studio 出品的产品一样，它的 IntelliSense 用户体验非常出色，而且比 Eclipse 更加轻便。

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

按“CTRL + N”创建新页面，然后立即按“CTRL + S”保存。
文件名称可以随意，但请确保文件扩展名为“.html”。

现在你准备好了。

我们来试试用半角字符输入“!”。

别着急。
输入感叹号（！）后，慢慢按下 TAB 键。

它看起来会像这样。

不难想象“!”是如何像这样展开的，从而大大加快编码速度。

Emmet的功能远不止这些！
生成列表也极其简单。

我们来尝试创建一个包含 ul 和 li 标签的父子关系的列表，并且一行包含四个 li 标签。
下面的 GIF 动画展示了向我们之前创建的 HTML 代码中添加元素的过程。

只需输入“ul>li*4”，即可快速创建一个包含四个 li 标签的 ul 标签。

如果你已经看到这里，你大概可以猜到如何处理 ID 和 CLASS 了。

如果你理解了这一点，我想你会觉得它很有用。

接下来，我们尝试一次性编写 dl、dt 和 dd 标签。dt
和 dd 标签是作为同级元素编写的，而不是父元素和子元素，这正如您所预期的那样。

它的缩进也很正确。在这个视频中，我使用了四个空格的缩进设置，但你也可以在 VSCode 设置中将其更改为两个空格或制表符。

一个小技巧是快速写出来，但是如果你不在最后一个元素后面加上“">”，它可能无法按预期转换，所以要小心。

你能感受到这种全能感贯穿你的全身吗？

我知道Emmet可以以闪电般的速度生成HTML。
但Emmet的功能远不止于此。
它也是一个功能强大的工具，可以轻松处理CSS！

然而，CSS 的属性实在太多，很多情况下你都无法充分利用它们。
对于像 display、margin 和 border 这样常用的属性，都有相应的缩写，所以你一定要好好利用它们。

个小窍门：这里尽量只记住你经常用到的东西。
据说有500多个，所以全部记住非常困难，如果你有那么多记忆容量，你肯定更愿意把它用在其他地方，对吧？

不过，有一件事我觉得值得记住，虽然它没有包含在速查表中，但这是一种常用的“margin: 0 auto;”的写法。

看起来它应该可以和“m0-auto”一起使用！

似乎还可以使用“+”键一次展开多个 CSS 属性。
就像这样！

原始字符串实际上就是一段代码。
如果你对它进行修改并开始编写代码，你可能会对此感到非常兴奋。

Emmet（ZenCoding）本身并不是一个特别新的工具，但VS Code不断追求新功能，使其值得关注。
我感觉它会成为一款越来越不可或缺的编辑器。

就这样。

如果您觉得这篇文章对您有帮助，请点个“赞”！

加载中...

这篇文章的作者

关于作者

我的主要工作是开发社交游戏的Web API，但幸运的是，我也有机会参与其他各种任务，包括市场营销。
我在Beyond中的图像版权采用CC0协议。