Emmet插件及用法，VS code前端开发必备神器

这里介绍Vs code中如何使用，Emmet官网文档 点击查阅

但今天介绍一个神器——Emmet，它的前身是 Zen coding，作为插件被广泛程序员使用。它利用了类 CSS 代码的编写方式能够快速地生成对应的 HTML 代码，进一步提升编写 HTML 的效率。

生产力决定工作效率

基本操作

---

• VS code文本编辑器内置了Emmet插件，无需安装。

• 新版的VS code中默认不启用Emmet自动补全，我们在首选项配置中将emmet.triggerExpansionOnTab设置为true即可，其他文本编辑器部分也是内置的，操作类似。
  

• 设置点击左下角即可，也可以菜单栏——首选项——设置

• vscode界面首次安装时英文，可以在扩展应用中搜索Chinese(simplified) Language 安装即可
  

  
  
  

Emmet语法(简写+Tab)

---

1. HTML 初始化

! + Tab
//快速生成Html文档常用结构代码,当然你可以去VS code安装包修改这个模板。

2. 标签

对一个标签直接按Tab补全，Emmet 可以帮你自动补全尖括号与结尾的结束标签。

• 键入标签名+ Tab
• 示例

3.子代

• 键入 >号 + Tab
• 示例

4. 同级

• 键入+号 + Tab
• 示例

5. 到上级

• 键入^号 + Tab
• 示例

6. 多个

• 键入* number + tab
• 示例

7. 生成元素属性

• 键入 #id名 + tab
• 键入 .类名 + tab
• 生成普通属性[] + tab
• 生成元素内容 {} + tab
• 示例

我是文字内容

8. 添加序号

• 键入占位符$ + tab $的数量代表序列号的位数
• 示例

    
01排序
    
02排序
    
03排序
    
04排序
    
05排序

9. 生成随机文本

lorem是Lorem ipsum的简称，中文称之为「乱数假文」。
作用是随机生成一些填充文本，类似数学函数=rand()。
更多介绍可以查阅

• 键入lorem+number + tab lorem后面的数字代表几个单词
• 示例

    
Lorem ipsum dolor sit amet consectetur.
    
Reiciendis voluptatum veritatis itaque ea ipsum.
    
Ullam facilis itaque aperiam cumque quo!
    
Vitae officiis accusamus exercitationem. Ut, sint.

PS中的用法展示

lorem的用途展示

10. Abbreviations-Implicit tag names（缩写词-隐式标签）

*不嵌套的直接键入内容指代div
*其他常见的隐式指代如：ul,ol,table,em等

• 示例

    
我是文字内容
    
我是文字内容
    
我是文字内容




        

    

11. CSS Abbreviations （CSS相关的缩写词-隐式标签

基本内容

• 键入属性的首字母或缩写词，快速生成属性
• 示例

.body{

    width: 400px;
    height: 300px;
    margin: 24px;
    padding: 32px;


 margin: 0 0 24px 0;


 font-size: 20px;


font-size: 1.5em;


font-wight: 500;


line-height: 48;


background-color: #fff;


display: inline-block;


display: inline-flex;


display: flex;
} 

长标签名支持缩写

---

Emmet官网文档 点击查阅更多