HBuilderX - 高效极客技巧

惯常来讲,ide和编辑器是2个产品类别。
ide侧重于某种语言的语法分析、提示、转到定义、调试。
而编辑器则是对通用文本处理,但提供更高效的通用文本处理能力。
上一代HBuilder是一个典型的IDE,语言处理非常强大,但在字处理方面客观讲不如优秀的编辑器。
而新的HBuilderX,定位是ide和编辑器的完美结合,那么HBuilderX就会提供世界顶级的高效字处理能力。
看完这些,你一定会惊叹,原来极客是这么玩的。

免拖动选择

\n

用鼠标或拖着选中一片文本,是一个很容易让食指抽筋的操作。尤其是触摸板更痛苦。
但是背诵很多相关的快捷键也一样痛苦。
HBuilderX提供了更友好方式:智能双击和Ctrl+扩大选区。

智能双击

\n

下面是智能双击选中tag和包围父tag的示例
1. 双击div tag的首或尾可以选中这个tag,即开头的<左侧或结尾的>右侧。当然双击if、双击缩进符、双击括号引号内侧...很多位置都可以通过智能双击选中。具体见HBuilder的选择菜单。
2. 按Ctrl+]包围,就可以在这个选区首尾加父标签,同时闪烁光标。当前在js里按下Ctrl+]不会包围tag,而是包围if、for等函数库。
3. 输入div即可在首尾添加包围标签

扩大选区Ctrl+=

\n

=是+的默认键位置,所以Ctrl+=其实就是Ctrl键和+号一起按下。
在HBuilderX里可以智能的判断选区范围,持续扩大选区,无鼠标快速选中你需要的选区。

反包围

\n

上面讲到包围,也自然有反包围。
1. 双击tag p开头,选中该tag。
2. 按反包围Ctrl+Shift+],可去掉tag p并自动处理子节点的缩进。

这里多提一句HBuilderX的快捷键理念,就是符号化,而不是字母化。
很多工具的快捷键都是控制键+功能英文单词中的一个字母,这个是极难记忆的。
符号化让快捷键的记忆变简单,比如Ctrl+]是包围。
而反操作或增强操作一般是加Shift,比如Ctrl+Shift+]是反包围。

选中相同语法词

\n

  1. 下图中,使用普通的选择相同词,会把所有div都选中。但使用Ctrl+Shift+e(mac是Command+Shift+d),会智能识别语法,剔除不相干的词。
  2. 下图按下Ctrl+Shift+e同时选中tag首尾的div,而不会选中子节点的div。
  3. 然后就可以方便的将原div改名为p

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

交换选区内容

\n

当需要交互2个选区的内容时,选中a、剪切、点b前面、粘贴、选中b、找到之前a的位置点击、粘贴...这么长的操作太低效。
来看HBuilderX的Ctrl+Shift+x交互选区,也就是Ctrl+x的增强版。
1. 双击第1个style属性后的引号内侧,可选中引号内容。
2. 按下Ctrl后继续双击第2个style属性后的引号内侧,可选中2个引号内的选区。
3. 按下Ctrl+Shift+x,交换style属性的内容。

如果不选择内容,光标放置到2行,可直接交换这2行的内容,如下图

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

\n

选区选多了或选错了,不用担心要重头选,Ctrl+Shift+z不是撤销编辑内容,而是撤销最后一个选区。
1. 双击选中class
2. 按Ctrl+e选中相同词
3. 按Ctrl+Shift+z,不再选中最后一个词。

批量合并行

\n

下图示例,是把css合并为一行时的快捷操作
1. 双击{内侧选中class
2. 按Ctrl+双击选中另一个class
3. 按反格式化Ctrl+Shift+k,可以把每个css的区块代码都合并为一行
Ctrl+k是格式化代码,那么Ctrl+Shift+k就是合并为一行。

同时注释if段首尾

\n

if块的调整很常见,除了包围、反包围外,常用操作还有同时注释掉if段首尾。
1. 双击if选中if代码块
2. 按Ctrl+\在选区首尾加光标,变成多光标模式
3. 按Ctrl+/注释掉选区首尾行

帮助开发者成为极客,一直是HBuilder的理念。HBuilderX更上一层楼。
愿各位都能成为极客!

如果还有其他需求,可以到需求墙投票
欢迎转发传播HBuilderX的技巧,欢迎赞助我们


8 分享 关注
iosNodePython lhyh DCloud_客服_Trust 江南鹤 boygoujun 木子辰风 232675861@qq.com a567f6396d9db5
rtian1@163.com

rtian1@163.com 回复 DCloud_heavensoft

谢谢
0 赞 5 天前
DCloud_heavensoft

DCloud_heavensoft 回复 rtian1@163.com

这个是格式化配置,工具-插件配置-format-jsbeautifyrc.js,里面有个"preserve_newlines"
0 赞 5 天前
rtian1@163.com

rtian1@163.com

删除所有空行,有没有?
0 赞 5 天前
DCloud_heavensoft

DCloud_heavensoft 回复 1013189061@qq.com

百度 svn 命令行 导入项目。后续版本会完善这块
0 赞 2018-10-29 17:52
1013189061@qq.com

1013189061@qq.com 回复 DCloud_heavensoft

有没有文档啊?求分享
0 赞 2018-10-29 17:50
DCloud_heavensoft

DCloud_heavensoft 回复 1013189061@qq.com

目前需要用命令行导入
0 赞 2018-10-29 17:43
1013189061@qq.com

1013189061@qq.com

mac上的怎么用svn导入项目啊?急
0 赞 2018-10-29 17:15
a567f6396d9db5

a567f6396d9db5

快捷键设置仍然不够合理,在windows上一般是ctrl+的组合键,到了mac上自动变成command+的组合键。目前在mac上有的是command组合有的还是ctrl组合,非常混乱。
0 赞 2018-10-26 06:51
a567f6396d9db5

a567f6396d9db5

设置里面选择了用空格代替tab缩进,按下tab后缩进了四个空格,但是按退格键只能一个个删除空格不能一下子删除四个空格,这点请参考现有的几大IDE。
0 赞 2018-10-26 06:49
youxdd

youxdd

希望增加
1, 编辑区 行高 调节
2, 控制台 区域, 遮住了 左边的 项目管理器部分,
0 赞 2018-10-17 14:24
DCloud_heavensoft

DCloud_heavensoft 回复 默默牵挂

支持分栏。菜单视图里有,也有快去接机。
也可以拖一个标签卡出去到另一台显示器。
替换这个,用ctrl+e(mac是command+d)这个更好使。
HBuilderX也有很多小功能超级强大,而且可以说这样的小功能更多
0 赞 2018-10-16 03:57
默默牵挂

默默牵挂

还有希望hx右侧代码标记块可以像hb一样可以点击,有时候使用这个功能去替换一些代码很好用
0 赞 2018-10-15 13:23
默默牵挂

默默牵挂

希望hx支持分屏模式,hb的一些小功能太强大了
0 赞 2018-10-15 13:20
DCloud_heavensoft

DCloud_heavensoft 回复 haidy

普通HTML可以边改边看,只是vue文件不能
0 赞 2018-10-10 14:57
haidy

haidy 回复 DCloud_heavensoft

那这里说的边改边看是指什么呢
0 赞 2018-10-10 10:08
DCloud_heavensoft

DCloud_heavensoft 回复 haidy

HBuilderX只有边改边看的,只是uni-app还不支持H5版
0 赞 2018-10-08 15:45
hackpro@163.com

hackpro@163.com 回复 DCloud_heavensoft

谢谢大婶
0 赞 2018-10-08 13:25
haidy

haidy 回复 DCloud_heavensoft

我说的不是在微信开发具里运行哦,是那种比较快的,类似WEB浏览器的边改边预览
0 赞 2018-10-08 11:25
DCloud_heavensoft

DCloud_heavensoft 回复 付憷

最新版已经有了,在uni-app群里发了内测。节后会正式推送更新
0 赞 2018-09-30 17:57
付憷

付憷 回复 DCloud_heavensoft

这个功能还是个很有用的功能把,点击某个变量或者函数,右边有显示定位的小点
0 赞 2018-09-30 09:04
DCloud_heavensoft

DCloud_heavensoft 回复 haidy

有啊
0 赞 2018-09-30 01:25
haidy

haidy

没有边改边预览功能吗?
0 赞 2018-09-29 16:11
DCloud_heavensoft

DCloud_heavensoft 回复 小新的狗叫小白

目前没有,欢迎到需求墙投票:[http://dev.dcloud.net.cn/wish/](http://dev.dcloud.net.cn/wish/)
0 赞 2018-09-03 18:08
小新的狗叫小白

小新的狗叫小白

双击选中的hbuilder在滚动条侧出现所有相同的,点击可以自己定位过去,HbuilderX没有这个功能呀
0 赞 2018-09-03 15:18
DCloud_heavensoft

DCloud_heavensoft 回复 sinycat@163.com

HBuilderX的shift+enter是向上回车。主要考虑到现代开发中很少有人使用br排版,去掉了这个功能
0 赞 2018-08-15 23:44
sinycat@163.com

sinycat@163.com

HBuilder中Shift+Enter自动添加<br/>标签,X版本中没有了,怎么回事?
0 赞 2018-08-15 22:07
DCloud_heavensoft

DCloud_heavensoft 回复 Bear考拉熊

uni-app里不支持div,请改为view。在HTML里输入<div肯定有良好的不全。如果没有补全,还有一直情况是语法提示插件没有下载成功,注意状态栏的提示。
0 赞 2018-08-06 16:50
Bear考拉熊

Bear考拉熊

我在输入di的时候想得到div的提示好补全,但现在提示我其他的,这个怎么设置啊
0 赞 2018-08-06 14:57
weblk7

weblk7 回复 DCloud_heavensoft

好的谢谢!
0 赞 2018-08-06 14:21
DCloud_heavensoft

DCloud_heavensoft 回复 weblk7

工具-设置,从左边把tabsize那个节点copy到右边,从4修改为2。另外格式化的jsbeautify节点也同样需要覆盖默认设置。
0 赞 2018-08-03 15:36
weblk7

weblk7

请问hbuilderX怎么设置tab键为2个空格?
0 赞 2018-08-03 09:56
hoodoor@qq.com

hoodoor@qq.com

node-sass-china插件json配置里,怎么写命令参数?我想实现 --style compressed的编译效果,在mac版的HX中无法实现呢,"command": [
"${programPath}",
"${file}",
"${fileBasename}.css",
"--style",
"compressed"
],
0 赞 2018-08-01 17:45
1365240681@qq.com

1365240681@qq.com

喜欢用这个版本,插件可以自定义需要,看着更加现代简洁。
0 赞 2018-07-25 14:49
澹台苍鸿

澹台苍鸿

对于X的我的看法就是运行比原生版更快轻便,一句话六六六。
0 赞 2018-07-10 20:04
DCloud_heavensoft

DCloud_heavensoft 回复 522341725@qq.com

请把你觉得HBuilder比HBuilderX好用的地方告诉我们,我们尽快补充到HBuilderX里
0 赞 2018-07-02 17:31
522341725@qq.com

522341725@qq.com

没HBuilder好用,一开始,还要各种配置,而且还没有HBuilder那么好用,还是希望你更新HBuilder吧,开机慢一点,无所谓!
0 赞 2018-07-02 11:20
DCloud_heavensoft

DCloud_heavensoft 回复 1194693985@qq.com

如果下的是简包,第一次使用js提示时会询问是否安装插件。确定安装后才有提示。快捷键还是alt+/
1 赞 2018-06-27 22:34
1194693985@qq.com

1194693985@qq.com

代码提示怎么用啊。。。。。求解答
0 赞 2018-06-27 19:26
wwl-wwl@qq.com

wwl-wwl@qq.com 回复 默默牵挂

我也是,X没有这个功能,是我一直还在用旧的hbuilder的唯一原因。这个功能debug的时候太方便了...
0 赞 2018-06-20 09:24
DCloud_heavensoft

DCloud_heavensoft 回复 2467842481@qq.com

x没提供生成离线打包资源。这个功能使用时还得用HBuilder。
0 赞 2018-06-11 00:02
2467842481@qq.com

2467842481@qq.com

请问HX不能像HB一样离线打包么
0 赞 2018-06-10 22:59
Laeni

Laeni

非常好,还可以切换主题
0 赞 2018-06-10 00:01
DCloud_heavensoft

DCloud_heavensoft 回复 LYing

确定使用最新版,并且仍然有此问题。请QQ 248590311
0 赞 2018-06-08 14:26
LYing

LYing

ctrl+k格式化之后,定位到当前页页首,而不是当前位置?包括css文件,html文件,javascript文件
0 赞 2018-06-08 10:56
DCloud_heavensoft

DCloud_heavensoft 回复 LYing

项目管理器可折叠是什么意思?目前alt+q(mac是ctrl+q)是显示或关闭项目管理器
0 赞 2018-06-02 18:05
LYing

LYing

项目管理器可折叠,右侧显示定位代码块标记
0 赞 2018-06-02 14:29
DCloud_heavensoft

DCloud_heavensoft 回复 domn

目前还没有
0 赞 2018-05-30 16:10
DCloud_heavensoft

DCloud_heavensoft 回复 2467842481@qq.com

插件安装里装好svn插件后,点右键,外部命令-svn插件-checkout
0 赞 2018-05-30 15:55
domn

domn

HX怎么添加作者信息来着,记得老版好像有这个功能吧?
0 赞 2018-05-30 11:29
2467842481@qq.com

2467842481@qq.com

怎么导入不了SVN工程,在那里创建svn连接
0 赞 2018-05-29 13:53
59235605@qq.com

59235605@qq.com 回复 DCloud_heavensoft

OK了,ThankU~~~
0 赞 2018-05-28 11:22
DCloud_heavensoft

DCloud_heavensoft 回复 二哥酒吧

ctrl+shift+x或command+shift+x,会出现截屏?是什么软件的截屏注册了全局快捷键?
0 赞 2018-05-28 03:45
二哥酒吧

二哥酒吧

界面整体简洁了许多,智能感知和运行速度也快了许多,但是,老版的Hbuilder用的习惯了,这个还需要花一定的时间去适应。另外,我个人在用 智能交换选区时 ,按照上面的步骤,到最后会出现截屏的效果,应该是热键冲突了吧。还是希望楼主多发一些如何更方便使用的小技巧,把我们的习惯培养起来。感谢。
0 赞 2018-05-27 22:31
DCloud_heavensoft

DCloud_heavensoft 回复 59235605@qq.com

需要设置:http://ask.dcloud.net.cn/question/55284
0 赞 2018-05-25 12:54
59235605@qq.com

59235605@qq.com

.vue文件无法格式化,是需要设置还是就是暂不支持···
0 赞 2018-05-25 10:06
DCloud_heavensoft

DCloud_heavensoft 回复 734487622@qq.com

这段json是对的,但估计整段设置的json不合法。最新版hx已经支持自动检测了,删掉配置使用自动检测吧
0 赞 2018-05-23 16:49
嗨多磨

嗨多磨 回复 cendi229@foxmail.com

可以把编译less的命令快捷键设置为ctrl+s。按住ctrl连续按两次s就可以了,
0 赞 2018-05-23 16:00
734487622@qq.com

734487622@qq.com

您好,请教您一个问题,在HBuilderX中设置了浏览器,为什么没有反应
"browsers.config": {
"Chrome.path": "",
"Firefox.path": "D:\\Firefox\\firefox.exe",
"Edge.path": "",
"Safari.path": ""
},
0 赞 2018-05-13 14:21
cendi229@foxmail.com

cendi229@foxmail.com

外部命令 编译less 怎样保存时自动生成css?
0 赞 2018-05-04 15:11
DCloud_heavensoft

DCloud_heavensoft 回复 wangN

文件没有修改过,或只读
0 赞 2018-05-03 04:45
wangN

wangN

测试了一下HBuilerX,首先字体的感觉要更现代一点,然后界面的舒适度也好一些。但是,还存在一些问题。比如:默认状态下Ctrl + S 置灰,按快捷键不能保存,点击菜单保存选项也不可用是什么情况?
0 赞 2018-05-02 13:47
Snone

Snone

打开hbuilder x 之后,点运行浏览器,是置灰的、请问要怎么配置browsers.json
0 赞 2018-04-26 10:28
DCloud_heavensoft

DCloud_heavensoft 回复 565235117@qq.com

注意meta里的编码,也注意文件本身的编码
0 赞 2018-04-23 17:09
565235117@qq.com

565235117@qq.com

点击浏览器运行之后是乱码怎么办..改编码没用啊
1 赞 2018-04-23 11:07
DCloud_heavensoft

DCloud_heavensoft 回复 hackpro@163.com

点右下角的文件类型选择
0 赞 2018-04-20 17:05
hackpro@163.com

hackpro@163.com

不知道有没有哪项设置可以实现自定义文件的着色。比如 我的模板文件不是html,,而是tpl文件。不知道怎么关联到html。谢谢楼主大神
0 赞 2018-04-20 08:42
默默牵挂

默默牵挂

hx也加上hbuilder 选中代码时,显示右边相同代码位置的定位块就好了,那个功能太好用了,体验了下hx,还是hbuilder用的习惯了
2 赞 2018-04-17 14:27
DCloud_heavensoft

DCloud_heavensoft 回复 建站宝_赵

欢迎到需求墙投票http://dev.dcloud.net.cn/wish/
0 赞 2018-04-14 20:05
建站宝_赵

建站宝_赵

强烈要求自定义代码片段功能,有了这个才能最大减轻工作量
0 赞 2018-04-14 20:01
DCloud_heavensoft

DCloud_heavensoft 回复 iosNodePython

mac已经发了
0 赞 2018-03-27 11:14
iosNodePython

iosNodePython

mac 啥时候有正式版X?
0 赞 2018-03-27 08:12

要回复文章请先登录注册