玩转VSCode - 27讲 HTML、CSS以及前端开发神器Emmet介绍与支持 - 《开发者工具的使用技巧》

一、HTML、CSS
- 1、取色器 Color Picker
- 2、预览
二、Emmet

今天，我们一起来学习一下 VS Code 中的 HTML、CSS 和前端开发神器 Emmet 的支持。
之所以把这三个放在一起讲，是因为 HTML 和 CSS 的支持，很多内容在前面已经介绍过了，比如自动补全、代码格式化、代码片段（Code Snippet）等等。而今天，我们要介绍 VS Code 里 HTML、CSS 支持里一些不一样的地方。

一、HTML、CSS

这里我主要介绍两个比较实用的功能。

1、取色器 Color Picker

首先，你可以在书写 HTML 和 CSS 时使用取色器。
在书写 HTML 和 CSS 的时候，你可能经常需要修改元素的颜色。VS Code 为修改颜色，提供了一个图形化的界面，其中包含了颜色相关的属性。
当你打开一段 HTML 或者 CSS 代码时，你可以看到，VS Code 在颜色的前面画了一个方块（我们称作颜色装饰器 Color Decorator），用于展示这段颜色属性所对应的最终效果。

颜色装饰器
同时，当你把鼠标移动到这段代码上时，一个颜色选择器窗口就显示出来了。

颜色选择器窗口
这个窗口包括了五个主要的部件。首先，就是左下角最大的那个长方体，你可以通过在其中移动光标来调整颜色的饱和度（Saturation）。
27讲 HTML、CSS以及前端开发神器Emmet介绍与支持 - 图3
其次，在窗口的右侧，还有两个竖条，对应两个部件。左边的竖条是用于调整透明度（opacity），

右边的那个则是用于调整色相（hue）。

最后，在取色器的最上方，也有两个部件。
左侧的部件上，显示了当前颜色对应的代码。当你点击这个部件时，你可以选择不同的书写这个颜色的方式。比如对于颜色 RGB(0,0,0) ，在 CSS 里你也可以写成 #000，这样你就可以通过点击这个部件进行切换。
27讲 HTML、CSS以及前端开发神器Emmet介绍与支持 - 图6
右侧的部件，则是用于在取色器里修改颜色时，回退到之前的值。

除了在 HTML 和 CSS 中使用取色器以外，你还可以在任何需要书写颜色的代码里使用，只要这个语言插件实现了相应的 API。

2、预览

第二个非常实用的功能是CSS 选择器的预览。
比如，当你书写了一段 CSS 选择器后，有的时候会发现这段 CSS 没有生效。这可能是因为你的 HTML 结构有问题，从而导致这个 CSS 选择器不能生效。
为了解决这个问题，VS Code 的 CSS 预览（Hover）里提供了一段 HTML 代码片段，这个代码片段则可以让这个 CSS 选择器生效。
27讲 HTML、CSS以及前端开发神器Emmet介绍与支持 - 图8
虽然上面这两个技巧非常实用，但是它们还是不够强大。要说到 VS Code 里书写 HTML 和 CSS最厉害的地方，那就属于 Emmet 支持了。那什么是 Emmet 呢？

二、Emmet

在专栏前面的章节里，我们介绍过代码片段（Code Snippet），你可以通过预定义代码的模板来省去重复代码的输入。但是有的时候，预定义好的模板也还是有局限性。尤其是在书写 HTML 的时候，你输入的代码，并不是 if 条件语句、for 循环语句这种常见的定式，而是根据你想要在网站上展示的效果而临时决定的 HTML 结构。换句话说，你书写的 HTML 其实反映的是业务逻辑，而这往往是无法通过代码片段来提前预测的。
Emmet 就是要解决这样的问题，为你的 HTML、CSS 书写提供类似于代码片段的输入方式，你只需输入一小段缩写，然后将其展开成最终的代码。Emmet 的语法类似于 CSS 选择器，你通过写一段接近于 CSS 选择器的代码缩写，然后使用 Emmet 引擎将它展开成复杂但完整的 HTML 或者 CSS 代码。举个最简单的例子，比如说你在 HTML 中写了 ul，然后 Emmet 就能够把它展开成下面的 HTML：

<ul></ul>

这样，你就不需要重复地输入 <> 尖括号，匹配开关节点等。不过这个例子还是太简单了，下面我们来看看，如何使用 CSS 选择器的语法来创造更复杂的 Emmet 缩写。

1、Child: > 子节点操作符

首先是子节点操作符，通过 > 符号来指明节点之间的层级关系。你可以将

ul>li

展开为：

<ui>
  <li></li>
</ui>

2、兄弟节点操作符 Sibling: +

而如果你希望创建兄弟节点的话，则需要 + 操作符。比如，

div+p+bq

会被展开成：

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

3、乘法操作 Multiplication: *

除了创建单个节点以外，你还可以通过 * 和数字，来创建多个节点。比如，

ul>li*3

会被展开成：

<ui>
  <li></li>
  <li></li>
  <li></li>
</ui>

4、Class Name, ID

另外，在书写 HTML 的时候，你不可避免地需要给节点添加属性，比如 id 和类。在 Emmet 中，它们的书写也很方便。
比如，

ul#list>li*3

你就可以通过 #list 来指定 ul 这个节点的 id 名。那么这个表达式会被展开为：

<ul id="list">
  <li></li>
  <li></li>
  <li></li>
</ul>

相信通过上面的例子，你已经看出了 Emmet 的强大之处。本质上，你可以通过类似于 CSS 选择器的语法来组织最终 HTML 文档的结构，并利用乘法、组合等操作符来执行重复的操作。
这就是 HTML、CSS 这两门语言的一个进阶版的代码片段。最后我们看下官方文档里提供的第一个例子：

 #page>div.logo+ul#navigation>li*5>a{Item $}

这段代码里，# 指定了 id，.logo 指定了类的名字，*5 是重复创建节点，而 {Item

$27讲 HTML、CSS以及前端开发神器Emmet介绍与支持 - 图9$ %0ATab%20%E9%94%AE%E5%B1%95%E5%BC%80%0A%E5%85%B6%E6%AC%A1%EF%BC%8C%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%9C%A8%E5%91%BD%E4%BB%A4%E9%9D%A2%E6%9D%BF%E4%B8%AD%E6%90%9C%E7%B4%A2%20%E2%80%9C%E5%B1%95%E5%BC%80%E7%BC%A9%E5%86%99%E2%80%9D%EF%BC%88Expand%20Abbreviation%EF%BC%89%E5%B9%B6%E6%89%A7%E8%A1%8C%E3%80%82%0A!%5B%5D(https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F53%2F68%2F53bee84b98829d2821cd6db8ddd8ca68.gif%23id%3DtZNVg%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone)%0A%E5%91%BD%E4%BB%A4%E9%9D%A2%E6%9D%BF%E5%B1%95%E5%BC%80%E7%BC%A9%E5%86%99%0A%23%23%23%202%E3%80%81%E5%BB%BA%E8%AE%AE%E5%88%97%E8%A1%A8%0A%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%88%9A%E5%AD%A6%E4%B9%A0%20Emmet%EF%BC%8C%E5%AF%B9%20Emmet%20%E7%9A%84%E8%AF%AD%E6%B3%95%E8%BF%98%E4%B8%8D%E7%86%9F%E6%82%89%EF%BC%8C%E9%82%A3%E4%B9%88%E4%BD%A0%E4%B8%80%E5%AE%9A%E5%B8%8C%E6%9C%9B%E7%9F%A5%E9%81%93%E8%87%AA%E5%B7%B1%E5%86%99%E7%9A%84%E7%BC%A9%E5%86%99%EF%BC%8C%E6%9C%80%E7%BB%88%E8%A2%AB%E5%B1%95%E5%BC%80%E6%97%B6%E6%98%AF%E4%BB%80%E4%B9%88%E6%95%88%E6%9E%9C%E3%80%82VS%20Code%20%E7%9A%84%E5%BB%BA%E8%AE%AE%E5%88%97%E8%A1%A8%E5%B7%B2%E7%BB%8F%E5%81%9A%E5%88%B0%E4%BA%86%E8%BF%99%E4%B8%80%E7%82%B9%EF%BC%8C%E5%BD%93%E4%BD%A0%E5%9C%A8%E7%BC%96%E8%BE%91%E5%99%A8%E9%87%8C%E4%B9%A6%E5%86%99%E7%BC%A9%E5%86%99%E6%97%B6%EF%BC%8C%E4%BD%A0%E8%83%BD%E5%A4%9F%E5%AE%9E%E6%97%B6%E5%9C%B0%E7%9C%8B%E5%88%B0%20Emmet%20%E7%BB%99%E7%9A%84%E5%B1%95%E5%BC%80%E5%BB%BA%E8%AE%AE%E3%80%82%0A!%5B%5D(https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F79%2F5d%2F794167fb45744927bdd87cee0e87755d.gif%23id%3DCBh0n%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone)%0AEmmet%20%E5%BB%BA%E8%AE%AE%0A%E5%A6%82%E6%9E%9C%E4%BD%A0%E4%B8%8D%E5%B8%8C%E6%9C%9B%E5%9C%A8%E5%BB%BA%E8%AE%AE%E5%88%97%E8%A1%A8%E4%B8%AD%E4%BD%BF%E7%94%A8%20Emmet%20%E7%9A%84%E8%AF%9D%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E9%85%8D%E7%BD%AE%22emmet.showExpandedAbbreviation%22%3A%20%22never%22%E6%9D%A5%E7%A6%81%E7%94%A8%E3%80%82%0A%23%23%23%203%E3%80%81%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%0A%E7%BC%A9%E5%86%99%E5%B1%95%E5%BC%80%E5%B7%B2%E7%BB%8F%E9%9D%9E%E5%B8%B8%E5%BC%BA%E5%A4%A7%E4%BA%86%EF%BC%8C%E4%BD%86%E6%98%AF%20Emmet%20%E9%87%8C%E8%BF%98%E6%9C%89%E4%B8%80%E4%B8%AA%20%E2%80%9C%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%E2%80%9D%20%E5%91%BD%E4%BB%A4%EF%BC%8C%E5%AE%83%E6%98%AF%E5%B9%B2%E4%BB%80%E4%B9%88%E7%94%A8%E7%9A%84%E5%91%A2%EF%BC%9F%E6%AF%94%E5%A6%82%E8%AF%B4%EF%BC%8C%E4%BD%A0%E5%B7%B2%E7%BB%8F%E5%86%99%E5%A5%BD%E4%BA%86%E4%B8%80%E6%AE%B5%20HTML%EF%BC%9A%0A%60%60%60html%0A%3Cspan%3EHello%3C%2Fspan%3E%0A%60%60%60%0A%E7%84%B6%E5%90%8E%E4%BD%A0%E5%B8%8C%E6%9C%9B%E6%8A%8A%E5%AE%83%E6%94%BE%E5%88%B0%E4%B8%80%E4%B8%AA%E5%88%97%E8%A1%A8%E4%B8%AD%E3%80%82%E4%BD%A0%E5%BD%93%E7%84%B6%E5%8F%AF%E4%BB%A5%E5%85%88%E5%86%99%E4%B8%80%E4%B8%AA%20li%EF%BC%8C%E5%B1%95%E5%BC%80%E7%BC%A9%E5%86%99%EF%BC%8C%E6%8E%A5%E7%9D%80%E6%8A%8A%E4%B8%8A%E9%9D%A2%E7%9A%84%20HMTL%20%E7%89%87%E6%AE%B5%E5%89%AA%E5%88%87%E5%88%B0%E5%88%97%E8%A1%A8%E4%B8%AD%E3%80%82%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E9%80%89%E4%B8%AD%E8%BF%99%E6%AE%B5%20HTML%20%E7%89%87%E6%AE%B5%EF%BC%8C%E5%9C%A8%E5%91%BD%E4%BB%A4%E9%9D%A2%E6%9D%BF%E4%B8%AD%E6%89%A7%E8%A1%8C%20%E2%80%9C%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%E2%80%9D%EF%BC%88Wrap%20with%20Abbreviation%EF%BC%89%20%E5%91%BD%E4%BB%A4%E3%80%82%E6%8E%A5%E7%9D%80%EF%BC%8CVS%20Code%20%E5%B0%B1%E4%BC%9A%E6%98%BE%E7%A4%BA%E4%B8%80%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%9C%A8%E8%BF%99%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%E5%86%85%E5%A1%AB%E5%85%A5%20Emmet%20%E7%BC%A9%E5%86%99%EF%BC%8C%E8%BF%99%E4%B8%AA%E7%BC%A9%E5%86%99%E5%B1%95%E5%BC%80%E5%90%8E%EF%BC%8C%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%8A%8A%E6%88%91%E4%BB%AC%E9%80%89%E4%B8%AD%E7%9A%84%20HTML%20%E6%94%BE%E5%9C%A8%E5%85%B6%E4%B8%AD%E3%80%82%0A!%5B%5D(https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F53%2F50%2F53eff51f095b22bcc22d8d2e219c4050.gif%23id%3DAEjql%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone)%0A%E5%91%BD%E4%BB%A4%E9%9D%A2%E6%9D%BF%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%0A%E5%9C%A8%E4%B8%8A%E9%9D%A2%E7%9A%84%E5%8A%A8%E5%9B%BE%E4%B8%AD%EF%BC%8C%E7%9B%B8%E4%BF%A1%E4%BD%A0%E8%BF%98%E5%8F%91%E7%8E%B0%E4%BA%86%EF%BC%8C%E5%BD%93%E4%BD%A0%E5%9C%A8%E8%BE%93%E5%85%A5%E6%A1%86%E4%B8%AD%E5%A1%AB%E5%85%A5%20Emmet%20%E7%BC%A9%E5%86%99%E6%97%B6%EF%BC%8C%E7%BC%96%E8%BE%91%E5%99%A8%E9%87%8C%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%A0%B9%E6%8D%AE%E6%9C%80%E6%96%B0%E7%9A%84%E7%BC%A9%E5%86%99%E8%BF%9B%E8%A1%8C%E6%9B%B4%E6%96%B0%EF%BC%8C%E8%BF%99%E6%A0%B7%E4%BD%A0%E5%B0%B1%E8%83%BD%E5%A4%9F%E5%AE%9E%E6%97%B6%E5%9C%B0%E9%A2%84%E8%A7%88%20Emmet%20%E7%BC%A9%E5%86%99%E8%A2%AB%E5%B1%95%E5%BC%80%E5%90%8E%E7%9A%84%E6%95%88%E6%9E%9C%E4%BA%86%E3%80%82%0A!%5B%5D(https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2Fe2%2Ff6%2Fe246336cd53dab5492660dd31b51a1f6.gif%23id%3DiHEIa%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone)%0A%E9%A2%84%E8%A7%88%E7%BC%A9%E5%86%99%E5%B1%95%E5%BC%80%0A%23%23%23%204%E3%80%81%E5%A4%9A%E5%85%89%E6%A0%87%0AEmmet%20%E6%93%8D%E4%BD%9C%E5%90%8C%E6%A0%B7%E4%B9%9F%E6%94%AF%E6%8C%81%E5%A4%9A%E5%85%89%E6%A0%87%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%88%9B%E5%BB%BA%E4%BA%86%E5%A4%9A%E4%B8%AA%E5%85%89%E6%A0%87%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%90%8C%E6%97%B6%E5%9C%A8%E5%AE%83%E4%BB%AC%E4%B8%8A%E9%9D%A2%E6%89%A7%E8%A1%8C%20%E2%80%9C%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%E2%80%9D%20%E5%91%BD%E4%BB%A4%E3%80%82%0A!%5B%5D(https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2Fb7%2F7c%2Fb7e273d245ff545622d7ee49a957487c.gif%23id%3DLnATl%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone)%0AEmmet%20%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%A4%9A%E5%85%89%E6%A0%87%0A%23%23%23%205%E3%80%81%E5%85%B6%E4%BB%96%E6%93%8D%E4%BD%9C%0A%E9%99%A4%E4%BA%86%E8%83%BD%E5%A4%9F%E5%B1%95%E5%BC%80%20Emmet%20%E7%BC%A9%E5%86%99%EF%BC%8CEmmet%20%E5%B7%A5%E5%85%B7%E8%BF%98%E6%8F%90%E4%BE%9B%E4%BA%86%E5%87%A0%E4%B8%AA%20HTML%20%E7%9A%84%E5%BF%AB%E6%8D%B7%E5%91%BD%E4%BB%A4%E3%80%82%0A%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%B0%B1%E6%98%AF%E5%9C%A8%20open%20%E8%8A%82%E7%82%B9%E5%92%8C%20close%20%E8%8A%82%E7%82%B9%E4%B9%8B%E9%97%B4%E8%BF%9B%E8%A1%8C%E8%B7%B3%E8%BD%AC%EF%BC%8C%E5%91%BD%E4%BB%A4%E6%98%AF%20%E2%80%9CEmmet%3A%20%E8%BD%AC%E5%88%B6%E5%8C%B9%E9%85%8D%E5%AF%B9%E2%80%9D%E3%80%82%0A!%5B%5D(https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2Fee%2F8d%2Feee3b4149a27f6c2174fbf4ffa71b78d.gif%23id%3DFbznw%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone)%0A%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%B0%B1%E6%98%AF%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9%E3%80%82%E5%9C%A8%20HTML%20%E4%B8%AD%E5%88%A0%E9%99%A4%20HTML%20%E8%8A%82%E7%82%B9%E6%9C%80%E9%BA%BB%E7%83%A6%E7%9A%84%E5%B0%B1%E6%98%AF%E4%BD%A0%E9%9C%80%E8%A6%81%E6%8A%8A%E5%BC%80%E3%80%81%E5%85%B3%E4%B8%A4%E4%B8%AA%E8%8A%82%E7%82%B9%E9%83%BD%E5%88%A0%E9%99%A4%E6%8E%89%EF%BC%8C%E5%90%A6%E5%88%99%20HTML%20%E7%BB%93%E6%9E%84%E5%B0%B1%E4%B8%8D%E5%AE%8C%E6%95%B4%E4%BA%86%E3%80%82%E9%80%9A%E8%BF%87%E5%91%BD%E4%BB%A4%20%E2%80%9CEmmet%EF%BC%9A%E7%A7%BB%E9%99%A4%E6%A0%87%E7%AD%BE%E2%80%9D%EF%BC%8C%E4%BD%A0%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%90%8C%E6%97%B6%E5%B0%86%E5%BC%80%E3%80%81%E5%85%B3%E4%B8%A4%E4%B8%AA%E8%8A%82%E7%82%B9%E9%83%BD%E5%88%A0%E9%99%A4%E6%8E%89%E3%80%82%0A!%5B%5D(https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2Fb7%2Fc0%2Fb7cb9824421739a103a41f9513f9cac0.gif%23id%3Dl5lLp%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone)%0A%E4%BD%A0%E8%BF%98%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%20%E2%80%9CEmmet%EF%BC%9A%E6%9B%B4%E6%96%B0%E6%A0%87%E7%AD%BE%E2%80%9C%E6%9D%A5%E5%90%8C%E6%97%B6%E6%9B%B4%E6%96%B0%E4%B8%80%E5%AF%B9%E5%BC%80%E5%85%B3%E8%8A%82%E7%82%B9%EF%BC%88open%2Fclose%20tag%EF%BC%89%E3%80%82%0A!%5B%5D(https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F41%2Fb9%2F412999793f85c3c568826dd8a8113db9.gif%23id%3DJOry1%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone)%0A%E8%BF%99%E4%BA%9B%E5%91%BD%E4%BB%A4%E6%98%AF%E4%B8%8D%E6%98%AF%E5%9C%A8%20HTML%20%E7%BC%96%E8%BE%91%E5%99%A8%E6%97%B6%E9%9D%9E%E5%B8%B8%E5%AE%9E%E7%94%A8%E5%91%A2%EF%BC%9F%0A%23%23%23%206%E3%80%81%E5%A6%82%E4%BD%95%E5%9C%A8%E6%9F%90%E4%B8%AA%E8%AF%AD%E8%A8%80%E4%B8%AD%E6%89%93%E5%BC%80%20Emmet%20%E6%94%AF%E6%8C%81%0A%E9%BB%98%E8%AE%A4%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E5%9C%A8%20html%E3%80%81haml%E3%80%81jade%E3%80%81slim%E3%80%81jsx%E3%80%81xml%E3%80%81xsl%E3%80%81css%E3%80%81scss%E3%80%81sass%E3%80%81less%E3%80%81stylus%E3%80%81handlebars%E3%80%81php%20%E5%92%8C%20javascriptreact%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20Emmet%20%E3%80%82%E4%BD%86%E5%AF%B9%E4%BA%8E%E5%85%B6%E4%BB%96%E8%AF%AD%E8%A8%80%EF%BC%8C%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E5%A6%82%E4%B8%8B%E7%9A%84%E8%AE%BE%E7%BD%AE%E6%9D%A5%E5%B0%86%E5%85%B6%E6%89%93%E5%BC%80%E3%80%82%0A%60%60%60json%0A%22emmet.includeLanguages%22%3A%20%7B%0A%20%20%20%20%22javascript%22%3A%20%22javascriptreact%22%2C%0A%20%20%20%20%22vue-html%22%3A%20%22html%22%2C%0A%20%20%20%20%22razor%22%3A%20%22html%22%2C%0A%20%20%20%20%22plaintext%22%3A%20%22jade%22%0A%7D%0A%60%60%60%0A%E8%BF%99%E6%AE%B5%E8%AE%BE%E7%BD%AE%E7%9A%84%E8%A6%81%E7%82%B9%E5%B0%B1%E6%98%AF%EF%BC%8C%E5%B0%86%E6%9F%90%E4%B8%AA%20Emmet%20%E9%BB%98%E8%AE%A4%E4%B8%8D%E6%94%AF%E6%8C%81%E7%9A%84%E8%AF%AD%E8%A8%80%EF%BC%8C%E6%98%A0%E5%B0%84%E5%88%B0%E4%B8%80%E4%B8%AA%20Emmet%20%E6%94%AF%E6%8C%81%E7%9A%84%E8%AF%AD%E8%A8%80%E4%B8%8A%E3%80%82%E6%AF%94%E5%A6%82%E4%B8%8A%E9%9D%A2%E7%9A%84%E8%AE%BE%E7%BD%AE%E9%87%8C%EF%BC%8C%E6%88%91%E4%BB%AC%E6%8A%8A%20vue-html%20%E6%98%A0%E5%B0%84%E6%88%90%E4%BA%86%20html%EF%BC%8C%E9%82%A3%E4%B9%88%E5%BD%93%E4%BD%A0%E5%9C%A8%20vue-html%20%E4%BD%BF%E7%94%A8%20Emmet%20%E6%97%B6%EF%BC%8CEmmet%20%E5%B0%B1%E4%BC%9A%E6%8A%8A%E5%AE%83%E5%BD%93%E4%BD%9C%20html%20%E6%9D%A5%E5%A4%84%E7%90%86%E4%BA%86%E3%80%82%0A%23%23%20%E5%B0%8F%E7%BB%93%0A%E5%A5%BD%E4%BA%86%EF%BC%8C%E4%BB%A5%E4%B8%8A%E5%B0%B1%E6%98%AF%E6%88%91%E4%BB%AC%E4%BB%8A%E5%A4%A9%E5%86%85%E5%AE%B9%E7%9A%84%E5%85%A8%E9%83%A8%E3%80%82%E6%88%91%E4%BB%AC%E4%BB%8B%E7%BB%8D%E4%BA%86%20HTML%E3%80%81CSS%20%E7%9A%84%E4%B8%80%E4%BA%9B%E5%AE%9E%E7%94%A8%E7%9A%84%E5%91%BD%E4%BB%A4%E5%92%8C%E5%8A%9F%E8%83%BD%EF%BC%8C%E5%90%8C%E6%97%B6%E8%BF%98%E4%BB%8B%E7%BB%8D%E4%BA%86%20Emmet%20%E8%BF%99%E4%B8%AA%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%A5%9E%E5%99%A8%E3%80%82%E5%85%B3%E4%BA%8EEmmet%EF%BC%8C%E6%88%91%E4%BB%AC%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D%E4%BA%86%20Emmet%20%E7%9A%84%E8%AF%AD%E6%B3%95%EF%BC%8C%E4%BB%A5%E5%8F%8A%20VS%20Code%20%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%20Emmet%20%E8%BF%99%E4%BA%9B%E5%91%BD%E4%BB%A4%E3%80%82%E5%A6%82%E6%9E%9C%E4%BD%A0%E8%A7%89%E5%BE%97%20Emmet%20%E9%9D%9E%E5%B8%B8%E6%9C%89%E7%94%A8%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%B8%8C%E6%9C%9B%E6%9B%B4%E8%BF%9B%E4%B8%80%E6%AD%A5%EF%BC%8C%E4%BD%A0%E8%BF%98%E9%9C%80%E9%98%85%E8%AF%BB%20Emmet%20%E7%9A%84%E6%96%87%E6%A1%A3%E8%BF%9B%E4%B8%80%E6%AD%A5%E5%AD%A6%E4%B9%A0%E3%80%82%E6%AF%94%E5%A6%82%20Emmet%20%E5%85%81%E8%AE%B8%E4%BD%A0%E4%BF%AE%E6%94%B9%E5%AE%83%E7%9A%84%E8%AF%AD%E6%B3%95%EF%BC%8C%E4%BF%AE%E6%94%B9%E6%96%B9%E5%BC%8F%E6%9C%89%E7%82%B9%E7%B1%BB%E4%BC%BC%E4%BA%8E%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%EF%BC%8C%E6%98%AF%E9%9D%9E%E5%B8%B8%E4%B8%8D%E9%94%99%E7%9A%84%E8%BF%9B%E9%98%B6%E6%8A%80%E5%B7%A7%E4%BA%86%20%5Bhttps%3A%2F%2Fdocs.emmet.io%2Fcustomization%2F%5D(https%3A%2F%2Fdocs.emmet.io%2Fcustomization%2F)(%E5%A6%82%E6%9E%9C%E6%89%93%E4%B8%8D%E5%BC%80%EF%BC%8C%E8%AF%B7%E5%8F%82%E8%80%83%20%5Bhttps%3A%2F%2Fgithub.com%2Femmetio%2Femmet-docs%2Ftree%2Fmaster%2Fsrc%2Fdocuments%2Fcustomization%5D(https%3A%2F%2Fgithub.com%2Femmetio%2Femmet-docs%2Ftree%2Fmaster%2Fsrc%2Fdocuments%2Fcustomization))%E3%80%82%0A%E5%A6%82%E6%9E%9C%E4%BD%A0%E4%B9%9F%E6%9C%89%20HTML%E3%80%81CSS%20%E6%88%96%E8%80%85%20Emmet%20%E7%9B%B8%E5%85%B3%E7%9A%84%E7%BB%8F%E9%AA%8C%E5%92%8C%E6%84%9F%E6%82%9F%EF%BC%8C%E6%AC%A2%E8%BF%8E%E4%BD%A0%E8%B7%9F%E6%88%91%E4%BB%AC%E5%88%86%E4%BA%AB%EF%BC%81%0A%0A#card=math&code=%E6%89%80%E4%BB%A5%EF%BC%8C%E8%BF%99%E6%AE%B5%E4%BB%A3%E7%A0%81%E6%9C%80%E7%BB%88%E4%BC%9A%E8%A2%AB%E5%B1%95%E5%BC%80%E6%88%90%EF%BC%9A%0A%60%60%60html%0A%3Cdiv%20id%3D%22page%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22logo%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3Cul%20id%3D%22navigation%22%3E%0A%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EItem%201%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EItem%202%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EItem%203%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EItem%204%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3E%3Ca%20href%3D%22%22%3EItem%205%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%0A%60%60%60%0A%E7%9C%8B%E5%AE%8C%E4%B8%8A%E9%9D%A2%E7%9A%84%E8%BF%99%E4%BA%9B%E7%A4%BA%E4%BE%8B%EF%BC%8C%E4%BD%A0%E6%98%AF%E4%B8%8D%E6%98%AF%E5%8D%81%E5%88%86%E5%BF%83%E5%8A%A8%EF%BC%8C%E6%83%B3%E8%A6%81%E8%AF%95%E4%B8%80%E8%AF%95%20Emmet%20%E8%BF%99%E4%B8%AA%E5%B7%A5%E5%85%B7%E5%91%A2%EF%BC%9F%E5%85%B3%E4%BA%8E%E6%9B%B4%E5%A4%9A%20Emmet%20%E7%9A%84%E7%9F%A5%E8%AF%86%EF%BC%8C%E6%8E%A8%E8%8D%90%E4%BD%A0%E9%98%85%E8%AF%BB%E5%AE%98%E6%96%B9%E7%9A%84%E6%96%87%E6%A1%A3%E3%80%82%E8%99%BD%E7%84%B6%E6%98%AF%E8%8B%B1%E6%96%87%E7%9A%84%EF%BC%8C%E4%BD%86%E6%98%AF%E8%BF%98%E6%98%AF%E9%9D%9E%E5%B8%B8%E5%A5%BD%E7%90%86%E8%A7%A3%E7%9A%84%E3%80%82%0A%23%23%20%E4%B8%89%E3%80%81Emmet%20in%20VS%20Code%0A%E6%8E%A5%E4%B8%8B%E6%9D%A5%EF%BC%8C%E5%B0%B1%E5%88%B0%E4%BA%86%E6%88%91%E4%BB%AC%E4%B8%93%E6%A0%8F%E7%9A%84%E6%A0%B8%E5%BF%83%E5%86%85%E5%AE%B9%E3%80%82%E6%88%91%E4%BB%AC%E4%B8%80%E8%B5%B7%E7%9C%8B%E7%9C%8B%EF%BC%8C%20%E5%9C%A8VS%20Code%20%E4%B8%ADEmmet%20%E6%9C%89%E5%93%AA%E4%BA%9B%E8%B0%83%E7%94%A8%E6%96%B9%E5%BC%8F%E3%80%82%0A%23%23%23%201%E3%80%81%E5%B1%95%E5%BC%80%E7%BC%A9%E5%86%99%0A%E9%A6%96%E5%85%88%EF%BC%8C%E5%9C%A8%E5%90%84%E4%B8%AA%E7%BC%96%E8%BE%91%E5%99%A8%E9%87%8C%EF%BC%8C%E6%9C%80%E9%80%9A%E7%94%A8%E7%9A%84%E5%B1%95%E5%BC%80%20Emmet%20%E7%BC%A9%E5%86%99%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E5%B0%B1%E6%98%AF%E6%8C%89%E4%B8%8B%20Tab%20%E9%94%AE%E3%80%82%E4%B8%8D%E8%BF%87%E7%94%B1%E4%BA%8E%20VS%20Code%20%E4%B8%AD%E5%AF%B9%20Tab%20%E9%94%AE%E7%9A%84%E4%BD%BF%E7%94%A8%E9%9D%9E%E5%B8%B8%E9%A2%91%E7%B9%81%EF%BC%8C%E9%BB%98%E8%AE%A4%E5%B9%B6%E6%B2%A1%E6%9C%89%E6%89%93%E5%BC%80%E8%BF%99%E4%B8%AA%E5%8A%9F%E8%83%BD%E3%80%82%E6%89%80%E4%BB%A5%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%BD%A0%E8%A6%81%E7%94%A8%E8%BF%99%E4%B8%AA%E5%8A%9F%E8%83%BD%EF%BC%8C%E5%B0%B1%E9%9C%80%E8%A6%81%E9%80%9A%E8%BF%87%20emmet.triggerExpansionOnTab%20%E5%B0%86%E8%BF%99%E4%B8%AA%E8%AE%BE%E7%BD%AE%E6%89%93%E5%BC%80%E3%80%82%0A%E4%BF%AE%E6%94%B9%E5%AE%8C%E9%85%8D%E7%BD%AE%E5%90%8E%EF%BC%8C%E5%BD%93%E4%BD%A0%E5%9C%A8%20CSS%20%E6%96%87%E4%BB%B6%E9%87%8C%E8%BE%93%E5%85%A5%20p10%EF%BC%8C%20%E7%84%B6%E5%90%8E%E6%8C%89%E4%B8%8B%20Tab%20%E9%94%AE%E6%97%B6%EF%BC%8Cp10%20%E5%B0%B1%E4%BC%9A%E8%A2%AB%E6%9B%BF%E6%8D%A2%E6%88%90%20padding%3A%2010px%3B%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F57%2Fe9%2F57e3643aec40e989b9ac889ec869a6e9.gif%23id%3DkDKys%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0ATab%20%E9%94%AE%E5%B1%95%E5%BC%80%0A%E5%85%B6%E6%AC%A1%EF%BC%8C%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%9C%A8%E5%91%BD%E4%BB%A4%E9%9D%A2%E6%9D%BF%E4%B8%AD%E6%90%9C%E7%B4%A2%20%E2%80%9C%E5%B1%95%E5%BC%80%E7%BC%A9%E5%86%99%E2%80%9D%EF%BC%88Expand%20Abbreviation%EF%BC%89%E5%B9%B6%E6%89%A7%E8%A1%8C%E3%80%82%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F53%2F68%2F53bee84b98829d2821cd6db8ddd8ca68.gif%23id%3DtZNVg%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0A%E5%91%BD%E4%BB%A4%E9%9D%A2%E6%9D%BF%E5%B1%95%E5%BC%80%E7%BC%A9%E5%86%99%0A%23%23%23%202%E3%80%81%E5%BB%BA%E8%AE%AE%E5%88%97%E8%A1%A8%0A%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%88%9A%E5%AD%A6%E4%B9%A0%20Emmet%EF%BC%8C%E5%AF%B9%20Emmet%20%E7%9A%84%E8%AF%AD%E6%B3%95%E8%BF%98%E4%B8%8D%E7%86%9F%E6%82%89%EF%BC%8C%E9%82%A3%E4%B9%88%E4%BD%A0%E4%B8%80%E5%AE%9A%E5%B8%8C%E6%9C%9B%E7%9F%A5%E9%81%93%E8%87%AA%E5%B7%B1%E5%86%99%E7%9A%84%E7%BC%A9%E5%86%99%EF%BC%8C%E6%9C%80%E7%BB%88%E8%A2%AB%E5%B1%95%E5%BC%80%E6%97%B6%E6%98%AF%E4%BB%80%E4%B9%88%E6%95%88%E6%9E%9C%E3%80%82VS%20Code%20%E7%9A%84%E5%BB%BA%E8%AE%AE%E5%88%97%E8%A1%A8%E5%B7%B2%E7%BB%8F%E5%81%9A%E5%88%B0%E4%BA%86%E8%BF%99%E4%B8%80%E7%82%B9%EF%BC%8C%E5%BD%93%E4%BD%A0%E5%9C%A8%E7%BC%96%E8%BE%91%E5%99%A8%E9%87%8C%E4%B9%A6%E5%86%99%E7%BC%A9%E5%86%99%E6%97%B6%EF%BC%8C%E4%BD%A0%E8%83%BD%E5%A4%9F%E5%AE%9E%E6%97%B6%E5%9C%B0%E7%9C%8B%E5%88%B0%20Emmet%20%E7%BB%99%E7%9A%84%E5%B1%95%E5%BC%80%E5%BB%BA%E8%AE%AE%E3%80%82%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F79%2F5d%2F794167fb45744927bdd87cee0e87755d.gif%23id%3DCBh0n%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0AEmmet%20%E5%BB%BA%E8%AE%AE%0A%E5%A6%82%E6%9E%9C%E4%BD%A0%E4%B8%8D%E5%B8%8C%E6%9C%9B%E5%9C%A8%E5%BB%BA%E8%AE%AE%E5%88%97%E8%A1%A8%E4%B8%AD%E4%BD%BF%E7%94%A8%20Emmet%20%E7%9A%84%E8%AF%9D%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E9%85%8D%E7%BD%AE%22emmet.showExpandedAbbreviation%22%3A%20%22never%22%E6%9D%A5%E7%A6%81%E7%94%A8%E3%80%82%0A%23%23%23%203%E3%80%81%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%0A%E7%BC%A9%E5%86%99%E5%B1%95%E5%BC%80%E5%B7%B2%E7%BB%8F%E9%9D%9E%E5%B8%B8%E5%BC%BA%E5%A4%A7%E4%BA%86%EF%BC%8C%E4%BD%86%E6%98%AF%20Emmet%20%E9%87%8C%E8%BF%98%E6%9C%89%E4%B8%80%E4%B8%AA%20%E2%80%9C%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%E2%80%9D%20%E5%91%BD%E4%BB%A4%EF%BC%8C%E5%AE%83%E6%98%AF%E5%B9%B2%E4%BB%80%E4%B9%88%E7%94%A8%E7%9A%84%E5%91%A2%EF%BC%9F%E6%AF%94%E5%A6%82%E8%AF%B4%EF%BC%8C%E4%BD%A0%E5%B7%B2%E7%BB%8F%E5%86%99%E5%A5%BD%E4%BA%86%E4%B8%80%E6%AE%B5%20HTML%EF%BC%9A%0A%60%60%60html%0A%3Cspan%3EHello%3C%2Fspan%3E%0A%60%60%60%0A%E7%84%B6%E5%90%8E%E4%BD%A0%E5%B8%8C%E6%9C%9B%E6%8A%8A%E5%AE%83%E6%94%BE%E5%88%B0%E4%B8%80%E4%B8%AA%E5%88%97%E8%A1%A8%E4%B8%AD%E3%80%82%E4%BD%A0%E5%BD%93%E7%84%B6%E5%8F%AF%E4%BB%A5%E5%85%88%E5%86%99%E4%B8%80%E4%B8%AA%20li%EF%BC%8C%E5%B1%95%E5%BC%80%E7%BC%A9%E5%86%99%EF%BC%8C%E6%8E%A5%E7%9D%80%E6%8A%8A%E4%B8%8A%E9%9D%A2%E7%9A%84%20HMTL%20%E7%89%87%E6%AE%B5%E5%89%AA%E5%88%87%E5%88%B0%E5%88%97%E8%A1%A8%E4%B8%AD%E3%80%82%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E9%80%89%E4%B8%AD%E8%BF%99%E6%AE%B5%20HTML%20%E7%89%87%E6%AE%B5%EF%BC%8C%E5%9C%A8%E5%91%BD%E4%BB%A4%E9%9D%A2%E6%9D%BF%E4%B8%AD%E6%89%A7%E8%A1%8C%20%E2%80%9C%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%E2%80%9D%EF%BC%88Wrap%20with%20Abbreviation%EF%BC%89%20%E5%91%BD%E4%BB%A4%E3%80%82%E6%8E%A5%E7%9D%80%EF%BC%8CVS%20Code%20%E5%B0%B1%E4%BC%9A%E6%98%BE%E7%A4%BA%E4%B8%80%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%9C%A8%E8%BF%99%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%E5%86%85%E5%A1%AB%E5%85%A5%20Emmet%20%E7%BC%A9%E5%86%99%EF%BC%8C%E8%BF%99%E4%B8%AA%E7%BC%A9%E5%86%99%E5%B1%95%E5%BC%80%E5%90%8E%EF%BC%8C%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%8A%8A%E6%88%91%E4%BB%AC%E9%80%89%E4%B8%AD%E7%9A%84%20HTML%20%E6%94%BE%E5%9C%A8%E5%85%B6%E4%B8%AD%E3%80%82%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F53%2F50%2F53eff51f095b22bcc22d8d2e219c4050.gif%23id%3DAEjql%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0A%E5%91%BD%E4%BB%A4%E9%9D%A2%E6%9D%BF%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%0A%E5%9C%A8%E4%B8%8A%E9%9D%A2%E7%9A%84%E5%8A%A8%E5%9B%BE%E4%B8%AD%EF%BC%8C%E7%9B%B8%E4%BF%A1%E4%BD%A0%E8%BF%98%E5%8F%91%E7%8E%B0%E4%BA%86%EF%BC%8C%E5%BD%93%E4%BD%A0%E5%9C%A8%E8%BE%93%E5%85%A5%E6%A1%86%E4%B8%AD%E5%A1%AB%E5%85%A5%20Emmet%20%E7%BC%A9%E5%86%99%E6%97%B6%EF%BC%8C%E7%BC%96%E8%BE%91%E5%99%A8%E9%87%8C%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%A0%B9%E6%8D%AE%E6%9C%80%E6%96%B0%E7%9A%84%E7%BC%A9%E5%86%99%E8%BF%9B%E8%A1%8C%E6%9B%B4%E6%96%B0%EF%BC%8C%E8%BF%99%E6%A0%B7%E4%BD%A0%E5%B0%B1%E8%83%BD%E5%A4%9F%E5%AE%9E%E6%97%B6%E5%9C%B0%E9%A2%84%E8%A7%88%20Emmet%20%E7%BC%A9%E5%86%99%E8%A2%AB%E5%B1%95%E5%BC%80%E5%90%8E%E7%9A%84%E6%95%88%E6%9E%9C%E4%BA%86%E3%80%82%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2Fe2%2Ff6%2Fe246336cd53dab5492660dd31b51a1f6.gif%23id%3DiHEIa%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0A%E9%A2%84%E8%A7%88%E7%BC%A9%E5%86%99%E5%B1%95%E5%BC%80%0A%23%23%23%204%E3%80%81%E5%A4%9A%E5%85%89%E6%A0%87%0AEmmet%20%E6%93%8D%E4%BD%9C%E5%90%8C%E6%A0%B7%E4%B9%9F%E6%94%AF%E6%8C%81%E5%A4%9A%E5%85%89%E6%A0%87%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%88%9B%E5%BB%BA%E4%BA%86%E5%A4%9A%E4%B8%AA%E5%85%89%E6%A0%87%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%90%8C%E6%97%B6%E5%9C%A8%E5%AE%83%E4%BB%AC%E4%B8%8A%E9%9D%A2%E6%89%A7%E8%A1%8C%20%E2%80%9C%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E5%8C%85%E5%9B%B4%E2%80%9D%20%E5%91%BD%E4%BB%A4%E3%80%82%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2Fb7%2F7c%2Fb7e273d245ff545622d7ee49a957487c.gif%23id%3DLnATl%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0AEmmet%20%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%A4%9A%E5%85%89%E6%A0%87%0A%23%23%23%205%E3%80%81%E5%85%B6%E4%BB%96%E6%93%8D%E4%BD%9C%0A%E9%99%A4%E4%BA%86%E8%83%BD%E5%A4%9F%E5%B1%95%E5%BC%80%20Emmet%20%E7%BC%A9%E5%86%99%EF%BC%8CEmmet%20%E5%B7%A5%E5%85%B7%E8%BF%98%E6%8F%90%E4%BE%9B%E4%BA%86%E5%87%A0%E4%B8%AA%20HTML%20%E7%9A%84%E5%BF%AB%E6%8D%B7%E5%91%BD%E4%BB%A4%E3%80%82%0A%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%B0%B1%E6%98%AF%E5%9C%A8%20open%20%E8%8A%82%E7%82%B9%E5%92%8C%20close%20%E8%8A%82%E7%82%B9%E4%B9%8B%E9%97%B4%E8%BF%9B%E8%A1%8C%E8%B7%B3%E8%BD%AC%EF%BC%8C%E5%91%BD%E4%BB%A4%E6%98%AF%20%E2%80%9CEmmet%3A%20%E8%BD%AC%E5%88%B6%E5%8C%B9%E9%85%8D%E5%AF%B9%E2%80%9D%E3%80%82%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2Fee%2F8d%2Feee3b4149a27f6c2174fbf4ffa71b78d.gif%23id%3DFbznw%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0A%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%B0%B1%E6%98%AF%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9%E3%80%82%E5%9C%A8%20HTML%20%E4%B8%AD%E5%88%A0%E9%99%A4%20HTML%20%E8%8A%82%E7%82%B9%E6%9C%80%E9%BA%BB%E7%83%A6%E7%9A%84%E5%B0%B1%E6%98%AF%E4%BD%A0%E9%9C%80%E8%A6%81%E6%8A%8A%E5%BC%80%E3%80%81%E5%85%B3%E4%B8%A4%E4%B8%AA%E8%8A%82%E7%82%B9%E9%83%BD%E5%88%A0%E9%99%A4%E6%8E%89%EF%BC%8C%E5%90%A6%E5%88%99%20HTML%20%E7%BB%93%E6%9E%84%E5%B0%B1%E4%B8%8D%E5%AE%8C%E6%95%B4%E4%BA%86%E3%80%82%E9%80%9A%E8%BF%87%E5%91%BD%E4%BB%A4%20%E2%80%9CEmmet%EF%BC%9A%E7%A7%BB%E9%99%A4%E6%A0%87%E7%AD%BE%E2%80%9D%EF%BC%8C%E4%BD%A0%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%90%8C%E6%97%B6%E5%B0%86%E5%BC%80%E3%80%81%E5%85%B3%E4%B8%A4%E4%B8%AA%E8%8A%82%E7%82%B9%E9%83%BD%E5%88%A0%E9%99%A4%E6%8E%89%E3%80%82%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2Fb7%2Fc0%2Fb7cb9824421739a103a41f9513f9cac0.gif%23id%3Dl5lLp%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0A%E4%BD%A0%E8%BF%98%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%20%E2%80%9CEmmet%EF%BC%9A%E6%9B%B4%E6%96%B0%E6%A0%87%E7%AD%BE%E2%80%9C%E6%9D%A5%E5%90%8C%E6%97%B6%E6%9B%B4%E6%96%B0%E4%B8%80%E5%AF%B9%E5%BC%80%E5%85%B3%E8%8A%82%E7%82%B9%EF%BC%88open%2Fclose%20tag%EF%BC%89%E3%80%82%0A%21%5B%5D%28https%3A%2F%2Fstatic001.geekbang.org%2Fresource%2Fimage%2F41%2Fb9%2F412999793f85c3c568826dd8a8113db9.gif%23id%3DJOry1%26originHeight%3D626%26originWidth%3D1088%26originalType%3Dbinary%26ratio%3D1%26status%3Ddone%26style%3Dnone%29%0A%E8%BF%99%E4%BA%9B%E5%91%BD%E4%BB%A4%E6%98%AF%E4%B8%8D%E6%98%AF%E5%9C%A8%20HTML%20%E7%BC%96%E8%BE%91%E5%99%A8%E6%97%B6%E9%9D%9E%E5%B8%B8%E5%AE%9E%E7%94%A8%E5%91%A2%EF%BC%9F%0A%23%23%23%206%E3%80%81%E5%A6%82%E4%BD%95%E5%9C%A8%E6%9F%90%E4%B8%AA%E8%AF%AD%E8%A8%80%E4%B8%AD%E6%89%93%E5%BC%80%20Emmet%20%E6%94%AF%E6%8C%81%0A%E9%BB%98%E8%AE%A4%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E5%9C%A8%20html%E3%80%81haml%E3%80%81jade%E3%80%81slim%E3%80%81jsx%E3%80%81xml%E3%80%81xsl%E3%80%81css%E3%80%81scss%E3%80%81sass%E3%80%81less%E3%80%81stylus%E3%80%81handlebars%E3%80%81php%20%E5%92%8C%20javascriptreact%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20Emmet%20%E3%80%82%E4%BD%86%E5%AF%B9%E4%BA%8E%E5%85%B6%E4%BB%96%E8%AF%AD%E8%A8%80%EF%BC%8C%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E5%A6%82%E4%B8%8B%E7%9A%84%E8%AE%BE%E7%BD%AE%E6%9D%A5%E5%B0%86%E5%85%B6%E6%89%93%E5%BC%80%E3%80%82%0A%60%60%60json%0A%22emmet.includeLanguages%22%3A%20%7B%0A%20%20%20%20%22javascript%22%3A%20%22javascriptreact%22%2C%0A%20%20%20%20%22vue-html%22%3A%20%22html%22%2C%0A%20%20%20%20%22razor%22%3A%20%22html%22%2C%0A%20%20%20%20%22plaintext%22%3A%20%22jade%22%0A%7D%0A%60%60%60%0A%E8%BF%99%E6%AE%B5%E8%AE%BE%E7%BD%AE%E7%9A%84%E8%A6%81%E7%82%B9%E5%B0%B1%E6%98%AF%EF%BC%8C%E5%B0%86%E6%9F%90%E4%B8%AA%20Emmet%20%E9%BB%98%E8%AE%A4%E4%B8%8D%E6%94%AF%E6%8C%81%E7%9A%84%E8%AF%AD%E8%A8%80%EF%BC%8C%E6%98%A0%E5%B0%84%E5%88%B0%E4%B8%80%E4%B8%AA%20Emmet%20%E6%94%AF%E6%8C%81%E7%9A%84%E8%AF%AD%E8%A8%80%E4%B8%8A%E3%80%82%E6%AF%94%E5%A6%82%E4%B8%8A%E9%9D%A2%E7%9A%84%E8%AE%BE%E7%BD%AE%E9%87%8C%EF%BC%8C%E6%88%91%E4%BB%AC%E6%8A%8A%20vue-html%20%E6%98%A0%E5%B0%84%E6%88%90%E4%BA%86%20html%EF%BC%8C%E9%82%A3%E4%B9%88%E5%BD%93%E4%BD%A0%E5%9C%A8%20vue-html%20%E4%BD%BF%E7%94%A8%20Emmet%20%E6%97%B6%EF%BC%8CEmmet%20%E5%B0%B1%E4%BC%9A%E6%8A%8A%E5%AE%83%E5%BD%93%E4%BD%9C%20html%20%E6%9D%A5%E5%A4%84%E7%90%86%E4%BA%86%E3%80%82%0A%23%23%20%E5%B0%8F%E7%BB%93%0A%E5%A5%BD%E4%BA%86%EF%BC%8C%E4%BB%A5%E4%B8%8A%E5%B0%B1%E6%98%AF%E6%88%91%E4%BB%AC%E4%BB%8A%E5%A4%A9%E5%86%85%E5%AE%B9%E7%9A%84%E5%85%A8%E9%83%A8%E3%80%82%E6%88%91%E4%BB%AC%E4%BB%8B%E7%BB%8D%E4%BA%86%20HTML%E3%80%81CSS%20%E7%9A%84%E4%B8%80%E4%BA%9B%E5%AE%9E%E7%94%A8%E7%9A%84%E5%91%BD%E4%BB%A4%E5%92%8C%E5%8A%9F%E8%83%BD%EF%BC%8C%E5%90%8C%E6%97%B6%E8%BF%98%E4%BB%8B%E7%BB%8D%E4%BA%86%20Emmet%20%E8%BF%99%E4%B8%AA%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%A5%9E%E5%99%A8%E3%80%82%E5%85%B3%E4%BA%8EEmmet%EF%BC%8C%E6%88%91%E4%BB%AC%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D%E4%BA%86%20Emmet%20%E7%9A%84%E8%AF%AD%E6%B3%95%EF%BC%8C%E4%BB%A5%E5%8F%8A%20VS%20Code%20%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%20Emmet%20%E8%BF%99%E4%BA%9B%E5%91%BD%E4%BB%A4%E3%80%82%E5%A6%82%E6%9E%9C%E4%BD%A0%E8%A7%89%E5%BE%97%20Emmet%20%E9%9D%9E%E5%B8%B8%E6%9C%89%E7%94%A8%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%B8%8C%E6%9C%9B%E6%9B%B4%E8%BF%9B%E4%B8%80%E6%AD%A5%EF%BC%8C%E4%BD%A0%E8%BF%98%E9%9C%80%E9%98%85%E8%AF%BB%20Emmet%20%E7%9A%84%E6%96%87%E6%A1%A3%E8%BF%9B%E4%B8%80%E6%AD%A5%E5%AD%A6%E4%B9%A0%E3%80%82%E6%AF%94%E5%A6%82%20Emmet%20%E5%85%81%E8%AE%B8%E4%BD%A0%E4%BF%AE%E6%94%B9%E5%AE%83%E7%9A%84%E8%AF%AD%E6%B3%95%EF%BC%8C%E4%BF%AE%E6%94%B9%E6%96%B9%E5%BC%8F%E6%9C%89%E7%82%B9%E7%B1%BB%E4%BC%BC%E4%BA%8E%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%EF%BC%8C%E6%98%AF%E9%9D%9E%E5%B8%B8%E4%B8%8D%E9%94%99%E7%9A%84%E8%BF%9B%E9%98%B6%E6%8A%80%E5%B7%A7%E4%BA%86%20%5Bhttps%3A%2F%2Fdocs.emmet.io%2Fcustomization%2F%5D%28https%3A%2F%2Fdocs.emmet.io%2Fcustomization%2F%29%28%E5%A6%82%E6%9E%9C%E6%89%93%E4%B8%8D%E5%BC%80%EF%BC%8C%E8%AF%B7%E5%8F%82%E8%80%83%20%5Bhttps%3A%2F%2Fgithub.com%2Femmetio%2Femmet-docs%2Ftree%2Fmaster%2Fsrc%2Fdocuments%2Fcustomization%5D%28https%3A%2F%2Fgithub.com%2Femmetio%2Femmet-docs%2Ftree%2Fmaster%2Fsrc%2Fdocuments%2Fcustomization%29%29%E3%80%82%0A%E5%A6%82%E6%9E%9C%E4%BD%A0%E4%B9%9F%E6%9C%89%20HTML%E3%80%81CSS%20%E6%88%96%E8%80%85%20Emmet%20%E7%9B%B8%E5%85%B3%E7%9A%84%E7%BB%8F%E9%AA%8C%E5%92%8C%E6%84%9F%E6%82%9F%EF%BC%8C%E6%AC%A2%E8%BF%8E%E4%BD%A0%E8%B7%9F%E6%88%91%E4%BB%AC%E5%88%86%E4%BA%AB%EF%BC%81%0A%0A)