HBuilderX使用技巧
最近使用HBuilder做开发,整理了一下一些有用的快捷键,仅部分,完整版请前往官网。
HBuilderX官方文档
免拖动选择
用鼠标拖着选中一片文本,是一个很容易让食指抽筋的操作。尤其是触摸板更痛苦。
但是背诵很多相关的快捷键也一样痛苦。
HBuilderX提供了更友好方式:智能双击和Ctrl+扩大选区。
![](https://img.haomeiwen.com/i2382884/3ace1652f40c2b3e.png)
智能双击
在HBuilderX中,但凡特殊点的字符,都能智能双击。
双击引号/括号内侧,是选中引号/括号内的内容
![](https://img.haomeiwen.com/i2382884/95f8f0659a8dcbc1.png)
双击逗号两侧,是选择逗号前一段或后一段
![](https://img.haomeiwen.com/i2382884/42f841c8c3fa14d3.png)
双击行尾,是选中该行(不含回车符)
![](https://img.haomeiwen.com/i2382884/e080ae1e79280861.png)
双击连词符(-_)选中整个词
![](https://img.haomeiwen.com/i2382884/149b633935cb8224.png)
双击折叠行首内容开头,选择折叠段落
![](https://img.haomeiwen.com/i2382884/8420ff58801d5aa9.png)
双击行首缩进,选择相同缩进的段落
双击列表符号,选择列表段落
双击Tag开头或结尾,选择整段Tag
双击属性赋值等号=,选择Html属性
双击if、function等关键字,选择整段包围区域
![](https://img.haomeiwen.com/i2382884/3444c94491714d03.png)
双击引号/括号内侧,是选中引号/括号内的内容
双击逗号两侧,是选择逗号前一段或后一段
双击行尾,是选中该行(不含回车符)
双击连词符(-_)选中整个词
双击折叠行首内容开头,选择折叠段落
双击行首缩进,选择相同缩进的段落
双击列表符号,选择列表段落
双击Tag开头或结尾,选择整段Tag
双击属性赋值等号=,选择Html属性
双击if、function等关键字,选择整段包围区域
双击分号,选择js等语言的;分号前段落
双击css类名左侧,选择Css类
双击注释符选择注释区域
双击#选择markdown标题段落
双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区
双击分号,选择js等语言的;分号前段落
双击css类名左侧,选择Css类
![](https://img.haomeiwen.com/i2382884/b0ce13a51b18736b.png)
双击注释符选择注释区域
双击#选择markdown标题段落
双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区
插件安装
![](https://img.haomeiwen.com/i2382884/61f481db379971ae.png)
![](https://img.haomeiwen.com/i2382884/6516fac8f8cb1782.png)
![](https://img.haomeiwen.com/i2382884/88d8c2454ebd3bae.png)
大纲
调出文件大纲,快速进行方法定位等,更加简洁的导览。
win: alt+w Mac:ctr+w
![](https://img.haomeiwen.com/i2382884/735d7bcdf28bf020.png)
折叠
alt + +或者-
![](https://img.haomeiwen.com/i2382884/bed1a40dcce884a6.png)
alt + shit + o 折叠当前选区以外的所有,以专注编辑当前的内容
![](https://img.haomeiwen.com/i2382884/047a594c6a18901f.png)
转到定义
alt + 鼠标左键
ctr + alt + 鼠标左键打开定义并开另外的一个窗口,同时编辑。mac:cmd + alt + 鼠标左键
![](https://img.haomeiwen.com/i2382884/639d2daa2e25d170.png)
格式化代码和批量合并
win ctr + k![](https://img.haomeiwen.com/i2382884/d253a5c90ebb5b7f.png)
Mac cmd + k
![](https://img.haomeiwen.com/i2382884/f2e0a075cd0db954.png)
-
反格式化,批量合并为单行
截屏2021-03-1016.49.46.png
win ctr + shift + k
Mac cmd + shift + k
多选及选中互换
ctr 按下可选择另一个区域
Mac cmd
![](https://img.haomeiwen.com/i2382884/c4eb53fb710adab5.png)
-
互换
ctr + shift + x
cmd + shift + x
截屏2021-03-1016.56.34.png
选中相同词
- Mac cmd + d 按一次多选中一个
- Win ctr + e
![](https://img.haomeiwen.com/i2382884/51233996765ef957.png)
- 批量选中全部相同词(不建议在此模式下修改,会选中不想干的内容,包含这个词的都会)
Mac ctr + alt + d
Win ctr + alt + e
使用Ctrl+Shift+e(mac是Cmd+Shift+d),会智能识别语法,剔除不相干的词。(亲测不好使,因情况而异)
![](https://img.haomeiwen.com/i2382884/9bd04a127801d66f.png)
以下为一些简单的使用方法
-
快速跑起一个web项目或者看原型文档。
截屏2021-03-1017.24.30.png
- 1、将目录拖进编辑器或者打开目录
-
2、工具栏点击运行至。。。
截屏2021-03-1017.26.14.png
插件安装
![](https://img.haomeiwen.com/i2382884/1ba6e602d9caf5fb.png)
![](https://img.haomeiwen.com/i2382884/56d0f808c3133a86.png)
点击前往插件市场搜索需要的插件
![](https://img.haomeiwen.com/i2382884/068268c41cf5727f.png)
- 点击使用HBuilderX 导入插件会自动安装
或者下载zip 解压 cd 到目录下 npm install
- 点击使用HBuilderX 导入插件会自动安装
创建项目
![](https://img.haomeiwen.com/i2382884/00086db29e3c432b.png)
可快速创建项目,免命令行配置