HBuilder X的安装及配置Emmet插件和使用部分快捷方式

安装HBuilder X

软件安装¹

配置Emmet插件

打开软件选择自己喜欢的主题然后进入主界面按下
Alt + T或者点击工具
之后按下
p或者点击安装插件
选择第一个插件emmet 点击安装即可

注意: 按装完之后要重启HBuilder X ，要不然自己使用Emmet功能快捷键按下Tab无法触发

Emmet功能快捷键

创建一个id为app标签内有三个名为temp的类标签：
div#app>div.temp*3 + Tab

创建一个item的类标签内含两个item-数字的类标签：div.item>div.item-$*2 + Tab

快捷代码代码

div#app>div.temp*3 /*鼠标光标放在代码行后按下Tab 可快速生成*/
div.item>div.item-$*2 /*鼠标光标放在代码行后按下Tab 可快速生成*/

div#app>div.temp*3+ Tab
div.item>div.item-$*2 + Tab

Emmet功能快捷键符号解释表

符号	Value
#	创建id名
div	表示div标签
.	表示创建类名
$	表示数字
>	表示进入到下一个如a>b 则a包含b

---

1. 软件安装 https://www.dcloud.io/hbuilderx.html ↩︎