前言

Emmet可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。

举个例子，我们在编辑器中输入缩写代码：ul>li*6 ，然后按下 Tab 键，即可得到如下代码片段：

  1.     <ul>
  2.         <li></li>
  3.         <li></li>
  4.         <li></li>
  5.         <li></li>
  6.         <li></li>
  7.         <li></li>
  8.     </ul>

如何在某个语言中打开 Emmet 支持

默认情况下，你可以直接在 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less、stylus、handlebars、php 和 javascriptreact 中使用 Emmet 。

但对于其他语言，你也可以通过如下设置将其打开：

  1. "emmet.includeLanguages": {
  2.     "javascript": "javascriptreact",
  3.     "vue-html": "html",
  4.     "razor": "html",
  5.     "plaintext": "jade"
  6. }

上方代码的意思是，将某个 Emmet 默认不支持的语言，映射到某个 Emmet 支持的语言上。比如上面的设置里，我们把 vue-html 映射成了 html，那么当你在 vue-html 使用 Emmet 时，Emmet 就会把它当作 html 来处理了。

Emmet 语法规则

语法规则：

  1. ul>li*6

最终效果：

  1.     <ul>
  2.         <li></li>
  3.         <li></li>
  4.         <li></li>
  5.         <li></li>
  6.         <li></li>
  7.         <li></li>
  8.     </ul>

语法规则：

  1. p5

最终效果：

  1. padding: 5px;