Emmet快捷输入，让你在小白路上就快人一步。

黑马王子13
325 阅读4分钟

Emmet：快速编写HTML和CSS的利器

什么是Emmet？

Emmet在我们前端中是无敌的存在，小白用了变大神，大神用了进大厂。Emmet是一个用于提高前端开发效率的插件，支持多种编辑器，比如在我们前端牛马最爱的vscode中。它通过简短的缩写语法，快速展开成完整的HTML和CSS代码。Emmet的核心理念是“少打字，多做事”，极大地提高了开发者的编码速度和准确性。

Emmet的基本语法

Emmet的基本语法类似于CSS选择器，通过简单的符号和关键字组合，可以生成复杂的HTML结构。以下是一些常见的Emmet语法：

1.生成HTML结构，只需输入! 或 html:5即可

    <!DOCTYPE html>
     <html lang="en">
     <head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
 </head>
<body>

</body>
</html>

2. 标签

  • div：生成一个 <div> 标签。
  • a：生成一个 <a> 标签。

  1. 子元素选择器

    • div>p：生成一个嵌套的 <div> 和 <p> 标签。 
      <div>
    <p></p>
</div>

  2. 兄弟元素选择器

    • div+p：生成两个并列的 <div> 和 <p> 标签。 
      <div></div>
<p></p>

  3. 多重元素选择器

    • ul>li*3：生成一个包含三个 <li> 子元素的 <ul> 列表。 
      <ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

  4. 类名和ID选择器

    • div.className：生成一个带有 class="className" 属性的 <div> 标签。
    •       <div class="classname"></div>
    • div#idName：生成一个带有 id="idName" 属性的 <div> 标签
    •       <div id="idname"></div>

  5. 属性选择器

    • a[href="http://example.com"]：生成一个带有 href 属性的 <a> 标签。 
      <a href="http://example.com"></a>

  6. 文本内容

    • p{Hello World}：生成一个包含文本内容的 <p> 标签。

      <p>Hello World</p>

  7. 分组

    • (div>p)+ul>li*2：生成一个嵌套结构，包含一个 <div> 和一个 <ul> 列表。 
      <div>
    <p></p>
</div>
<ul>
    <li></li>
    <li></li>
</ul>

Emmet的高级用法

除了基本语法，Emmet还提供了一些高级功能，可以帮助开发者更高效地编写代码。

  1. CSS缩写

    • m10：生成 margin: 10px;。
    • p5：生成 padding: 5px;。
    • bgc#ff0000：生成 background-color: #ff0000;。

  2. 自动补全

    • 输入部分CSS属性或HTML标签后，按Tab键即可自动补全。

  3. 代码片段

    • Emmet内置了许多常用的代码片段，可以通过输入缩写后按Tab键展开。
      • !：生成HTML5文档的基本结构。
      • header：生成一个标准的 <header> 部分。
      • footer：生成一个标准的 <footer> 部分。

  4. 快速注释

    • 在HTML中，选中一段代码后按 Ctrl+/ 可以快速注释或取消注释。
    • 在CSS中，选中一段代码后按 Ctrl+/ 同样可以快速注释或取消注释。

  5. 选择器导航

    • 使用 Ctrl+Shift+[ 和 Ctrl+Shift+] 可以在父元素和子元素之间快速导航。

Emmet在不同编辑器中的配置

Emmet支持多种编辑器，以下是在几种常见编辑器中安装和配置Emmet的方法。

  1. Visual Studio Code

    • 打开VSCode，进入扩展市场，搜索“Emmet”并安装。
    • 安装完成后，重启VSCode即可使用Emmet。

  2. Sublime Text

    • 打开Sublime Text，进入 Preferences -> Package Control，安装Package Control。
    • 重启Sublime Text，进入 Preferences -> Package Control -> Install Package，搜索“Emmet”并安装。

  3. Atom

    • 打开Atom，进入 File -> Settings -> Install，搜索“Emmet”并安装。
    • 安装完成后，重启Atom即可使用Emmet。

Emmet的最佳实践

为了最大限度地发挥Emmet的优势，以下是一些最佳实践建议：

  1. 熟练掌握基本语法：熟悉Emmet的基本语法是提高效率的基础，建议多练习常用缩写的展开。

  2. 利用高级功能：Emmet的高级功能如CSS缩写、代码片段和快速注释等，可以进一步提升编码速度。

  3. 定制配置：根据个人习惯和项目需求，可以自定义Emmet的配置，如缩进、格式化等。

  4. 结合其他工具：Emmet可以与其他前端开发工具（如Prettier、ESLint等）结合使用，形成一套完整的开发流程。

  5. 持续学习：Emmet的功能在不断更新和完善，建议定期查看官方文档，了解最新的特性和改进。

结论

Emmet作为一款高效的前端开发工具，通过简洁的缩写语法，极大地简化了HTML和CSS的编写过程。无论是初学者还是经验丰富的开发者，都可以从中受益。通过本文的介绍，希望读者能够掌握Emmet的基本用法和高级技巧，提高前端开发的效率和质量。在未来的发展中，Emmet将继续为前端开发带来更多的便利和创新。

avatar
文章
阅读
粉丝