Emmet 代码缩写扩展工具

Emmet：通过缩写快速生成 Html 和 Css 代码的扩展工具

示例编辑器：visual studio code (Vscode)

官网下载地址：https://code.visualstudio.com/

在vscode中，Emmet工具是作为内置功能存在的，这导致没有单独的开关选项来启用或禁用它，但默认情况下是启用的，在编辑HTML 和 css 或其他支持文件类型是会自动生效。

Emmet官方文档：https://docs.emmet.io/

Emmet 常见用法

HTML 

        单个标签：输入字母 自动生成标签

  <!-- 输入 p br  -->
    <p></p>
    <br>

        同级标签：标签名 + 标签名

    <!-- 输入 p+div  -->
    <p></p>
    <div></div>

        父子级标签：标签名 > 标签名

<!-- 输入 div>p -->
<div>
    <p></p>
</div>

        多个相同标签使用：标签名 * 个数

<!-- 输入 div*3 -->
<div></div>
<div></div>
<div></div>

         带有内容标签：标签名{内容}

<!-- div{emmet测试} -->
<div>emmet测试</div>

         标签和类名：标签名.类名

<!-- 输入 div.ts -->
<div class="ts"></div>

         标签和id ：标签#id

<!-- 输入 div#ce -->
<div id="ce"></div>

Emmet的所有简写都可以混用 

<!-- 输入 div>p.ts{测试}+P>span*2 -->
<div>
    <p class="ts">测试</p>
    <p><span></span><span></span></p>
</div>

可以看出 Emmet的缩写语法被设计成类似于Css选择的写法，并不难掌握，并且可以随意组合，下面在介绍两种不常用的缩写方式。

         分组：（）  将某个节点完成更复杂的写法

    <!-- 输入 div>(p>span+a)>p>a -->
    <div>
        <p><span></span><a href=""></a></p>
        <p><a href=""></a></p>
    </div>

        项目编号：$  代表数字，自增

    <!-- 输入 ul>li.item$*3 -->
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>

 具体详情信息和更多缩写方式请前往官网

Css 

 采自官网的原话  “ 对于CSS语法，Emmet有很多预定义的属性片段。例如，您可以展开缩写以获取代码段。但是，您不仅想要属性，还希望为此属性指定一个值 ”

简单的来说代码提示器只能快速写出属性，并不能直接写出属性值，因此Emmet完美的解决了这个问题

 css属性名大多简写形式都为首字母

属性名	简写属性名
width	w
background-image	bi

有时因为属性名简写首字母可能造成重复，

如  background-size 简写为 bs，可能首提示为 border-style

因此可以多写单词首字母，background-size 简写为 bgs

属性值为数值时：简写属性名数值

     li{
            /* 输入 w100px p100px50px */
            width: 100px;
            padding: 100px 50px;
        }

属性值为单词时：简写属性名:属性值

        li{
            /* 输入 c:pink  bgr:no-repeat*/
            color: pink;
            background-repeat: no-repeat;
        }

 实际操作中，单词也基本只需打出首字母即可

 Emmet 和 代码提示器 的区别

        简单来说，代码提示（Code IntelliSense）和 Emmet 是两个不同但可以相互配合的功能。

        代码提示它可以根据你正在编写的代码和上下文，提供关于代码补全、函数签名、方法参数、属性等方面的建议和提示。能够帮助你更快速地编写代码，减少拼写错误，提供有关代码库和框架的相关信息。

        Emmet 则是一个独立的工具，用于快速编写 HTML 和 CSS 代码。率。

        在 Visual Studio Code 中，Emmet 和代码提示可以协同工作。当你在编辑 HTML 或 CSS 代码时，Emmet 可以通过代码提示的方式在编辑器中提供 Emmet 缩写的建议和补全。这意味着，当你输入 Emmet 缩写的一部分时，VS Code 将显示相关的 Emmet 提示，帮助你快速选择并生成代码。

        所以说，通过结合代码提示和 Emmet，可以更高效地编写 HTML 和 CSS 代码，减少手动输入的工作量，并快速生成常见代码结构和属性。

以上仅为个人理解，欢迎大家指出错误或说出其他想法