HBuilder X编程开发工具

HBuilder X电脑版专门用来编写代码的开发工具，可将其应用于不同的代码开发场景中，中文页面能让你更好理解其中的功能。软件内提供了多个项目支持，极大满足了不同用户对于代码的编译需要。

HBuilder X官方版介绍

HBuilderX（简称HX）是DCloud（数字天堂）推出的前端开发工具，名称中"H"代表HTML，"Builder"意为构建者，"X"是HBuilder的下一代版本。它既是轻量级代码编辑器（类似VSCode、Sublime），又是功能完整的IDE（类似WebStorm）。

hbuilder x的使用教程

HBuilder X编程开发工具新手指引：

1.此版本为绿色版，对安装包后解压缩打开【HBuilderX】文件夹，双击运行【HBuilderX.exe】即可启动软件

2.进入软件后点击左上角+号，选择新建文件类型，这里以.js文件为例

3.根据提示进行基础设置后点击“创建”开始进行代码编写

版本特色

1.极速

不管是启动速度、大文档打开速度、编码提示，都极速响应

C++的架构性能远超Java或Electron架构

2.轻巧

仅10余M的绿色发行包(不含插件)

3.vue开发强化

HX对vue做了大量优化投入，开发体验远超其他开发工具

4.小程序支持

国外开发工具没有对中国的小程序开发优化，HX可开发uni-app或小程序、快应用等项目，为国人提供更高效工具

5.清爽护眼

HX的界面比其他工具更清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面

6.强大的语法提示

HX是中国唯一一家拥有自主IDE语法分析引擎的公司，对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)

7.markdown利器

HX是唯一一个新建文件默认类型是markdown的编辑器，也是对md支持最强的编辑器

HX为md强化了众多功能，请务必点击【菜单-帮助-markdown语法示例】，快速掌握md及HX的强化技巧

8.更强的json支持

现代js开发中大量json结构的写法，HX提供了比其他工具更高效的操作

9.高效极客工具

更强大的多光标、智能双击...让字处理的效率大幅提升

使用技巧

1、智能双击

下面是智能双击选中tag和包围父tag的示例：

（1）双击div的首或尾可以选中这个tag。当然双击if、双击缩进符、双击括号引号内侧...很多位置都可以通过智能双击选中。具体见HBuilder的选择菜单。

（2）按Ctrl+]包围，就可以在这个选区首尾加父标签，同时闪烁光标。当前在js里按下Ctrl+]不会包围tag，而是包围if、for等函数库。

（3）输入div即可在首尾添加包围标签。

2、免拖动选择

用鼠标或拖着选中一片文本，是一个很容易让食指抽筋的操作。尤其是触摸板更痛苦。

但是背诵很多相关的快捷键也一样痛苦。

HBuilderX提供了更友好方式：智能双击和Ctrl+=扩大选区。

3、扩大选区Ctrl+=

=是+的默认键位置，所以Ctrl+=其实就是Ctrl键和+号一起按下。

在HBuilderX里可以智能的判断选区范围，持续扩大选区，无鼠标快速选中你需要的选区。

4、反包围

上面讲到包围，也自然有反包围。

（1）双击tag p开头，选中该tag。

（2）按反包围Ctrl+Shift+]，可去掉tag p并自动处理子节点的缩进。

5、HBuilderX的快捷键理念，就是符号化，而不是字母化

很多工具的快捷键都是控制键+功能英文单词中的一个字母，这个是极难记忆的。

符号化让快捷键的记忆变简单，比如Ctrl+]是包围。

而反操作或增强操作一般是加Shift，比如Ctrl+Shift+]是反包围。

6、交换选区内容

当需要交互2个选区的内容时，选中a、剪切、点b前面、粘贴、选中b、找到之前a的位置点击、粘贴...这么长的操作太低效。

来看HBuilderX的Ctrl+Shift+x交互选区，也就是Ctrl+x的增强版。

（1）双击第1个style属性后的引号内侧，可选中引号内容。

（2）按下Ctrl后继续双击第2个style属性后的引号内侧，可选中2个引号内的选区。

（3）按下Ctrl+Shift+x，交换style属性的内容。

7、选中相同语法词

（1）使用普通的选择相同词，会把所有div都选中。但使用Ctrl+Shift+e（mac是Command+Shift+d），会智能识别语法，剔除不相干的词。

（2）按下Ctrl+Shift+e同时选中tag首尾的div，而不会选中子节点的div。

（3）然后就可以方便的将原div改名为p

选择一个括号时，也可以使用选中相同语法词，来选中对应的另一个括号。

8、撤销最后一个多选区或多光标

选区选多了或选错了，不用担心要重头选，Ctrl+Shift+z不是撤销编辑内容，而是撤销最后一个选区。

（1）双击选中class

（2）按Ctrl+e选中相同词。

（3）按Ctrl+Shift+z，不再选中最后一个词。

9、批量合并行

把css合并为一行时的快捷操作：

（1）双击{内侧选中class

（2）按Ctrl+双击选中另一个class

（3）按反格式化Ctrl+Shift+k，可以把每个css的区块代码都合并为一行。

Ctrl+k是格式化代码，那么Ctrl+Shift+k就是合并为一行。

10、同时注释if段首尾

if块的调整很常见，除了包围、反包围外，常用操作还有同时注释掉if段首尾。

（1）双击if选中if代码块。

（2）按Ctrl+\在选区首尾加光标，变成多光标模式。

（3）按Ctrl+/注释掉选区首尾行。

适用场景

小程序开发：

可直接运行到微信开发者工具模拟器调试。

移动开发：

通过uni-app框架开发跨平台应用，或使用5+App、wap2app模板构建混合应用。

Web开发：

支持响应式布局、性能优化及实时预览。

更新日志

v4.66.2025051912更新内容：

HBuilder：

-修复 4.64版本引发的 某些情况下，输入`(,`字符时会引发编辑器卡顿1-2s的Bug

-修复 uni-app 4.64版本引发的 首次运行到自定义基座uts插件缓存无效的Bug

-修复 uni-app (x) uts插件 kotlin文件，某些情况下，格式化代码时，提示格式化失败，请检查代码中是否有语法错误的Bug

-修复 uni-app (x) uts插件 swift文件，未保存代码时，格式化导致代码删除的Bug

App插件(含5+App和uni-app的App端)

-更新 uni-AD模块：

腾讯优量汇SDK Android为 4.640.1510 版，iOS为 4.15.40 版；

快手广告和快手内容联盟SDK Android为 3.3.76.5 版；

穿山甲&GroMore SDK Android为 6.8.1.7 版，iOS为 6.8.0.5 版；

Sigmob广告联盟SDK Android为 4.22.2 版，iOS为 4.18.2 版；

Octopus章鱼移动广告SDK Android为 1.6.3.6 版，iOS为 1.6.3.1 版；

AdScope倍孜广告SDK Android为 5.2.1.3 版；

泛连SDK Android为 2.8.4 版，iOS为 2.8.3.0.5 版；

华夏乐游SDK Android为 3.11.3 版，iOS为 2.13.0 版，助力618促销；