安装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

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

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

在CentOS 6.6 64bit上为vim 7.4安装并配置vim-airline插件
在CentOS 6.6 64bit上我使用Vundle来管理vim 7.4的所有插件.为了安装vim-airline插件,只需要在 ~/.vimrc 中添加一行 Plugin 'bling/vim-a ...
eclipse安装与配置maven插件
本文转载自:https://www.cnblogs.com/qnly/p/10487096.html 一.什么是maven? Maven是一个项目管理工具,它包含了一个项目对象模型 (Project ...
Myeclipse10安装设置配置Aptana插件
原文链接:http://1936625305.blog.51cto.com/6410597/1404758?utm_source=tuicool 在实际项目开发中由于Myeclipse10编辑jsp和 ...
Android Studio的下载，安装，配置，插件
Android Studio下载地址下面三个地址都可以下载: https://developer.android.google.cn/studio http://www.android-studio ...
VS code安装和配置swi-prolog插件
VS code上可以使用swi-prolog的插件, 如下图所示. 安装好插件后,代码提示会默认是perl,无法按照prolog语法进行提示,解决perl与prolog冲突的方式是打开一个pl文件后点 ...
linux安装powerline字体,CentOS安装与配置Powerline插件
安装 Powerline 首先确保已安装python和pip.可通过pip或git等工具安装,这里使用pip安装: pip install powerline-status 配置powerline到b ...
Vim安装、配置和插件的添加使用（可以以目录的形式打开）
1.简易安装wget https://raw.github.com/ma6174/vim/master/setup.sh -O ma6174_vim_setup.sh && bash ...
IntelliJ IDEA：安装/搭建/配置/插件
IntelliJ IDEA:安装/搭建/配置/插件安装: 配置: 插件:
PyCharm：安装/搭建/配置/插件
PyCharm:安装/搭建/配置/插件安装: 配置: 插件:

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