最近使用HBuilder做开发,整理了一下一些有用的快捷键,仅部分,完整版请前往官网。
HBuilderX官方文档
免拖动选择
用鼠标拖着选中一片文本,是一个很容易让食指抽筋的操作。尤其是触摸板更痛苦。
但是背诵很多相关的快捷键也一样痛苦。
HBuilderX提供了更友好方式:智能双击和Ctrl+扩大选区。

智能双击
在HBuilderX中,但凡特殊点的字符,都能智能双击。
双击引号/括号内侧,是选中引号/括号内的内容

双击逗号两侧,是选择逗号前一段或后一段

双击行尾,是选中该行(不含回车符)

双击连词符(-_)选中整个词

双击折叠行首内容开头,选择折叠段落

双击行首缩进,选择相同缩进的段落
双击列表符号,选择列表段落
双击Tag开头或结尾,选择整段Tag
双击属性赋值等号=,选择Html属性
双击if、function等关键字,选择整段包围区域

双击引号/括号内侧,是选中引号/括号内的内容
双击逗号两侧,是选择逗号前一段或后一段
双击行尾,是选中该行(不含回车符)
双击连词符(-_)选中整个词
双击折叠行首内容开头,选择折叠段落
双击行首缩进,选择相同缩进的段落
双击列表符号,选择列表段落
双击Tag开头或结尾,选择整段Tag
双击属性赋值等号=,选择Html属性
双击if、function等关键字,选择整段包围区域
双击分号,选择js等语言的;分号前段落
双击css类名左侧,选择Css类
双击注释符选择注释区域
双击#选择markdown标题段落
双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区
双击分号,选择js等语言的;分号前段落
双击css类名左侧,选择Css类

双击注释符选择注释区域
双击#选择markdown标题段落
双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区
插件安装



大纲
调出文件大纲,快速进行方法定位等,更加简洁的导览。
win: alt+w Mac:ctr+w

折叠
alt + +或者-

alt + shit + o 折叠当前选区以外的所有,以专注编辑当前的内容

转到定义
alt + 鼠标左键
ctr + alt + 鼠标左键打开定义并开另外的一个窗口,同时编辑。mac:cmd + alt + 鼠标左键

格式化代码和批量合并
win ctr + k
Mac cmd + k

-
反格式化,批量合并为单行
截屏2021-03-1016.49.46.png
win ctr + shift + k
Mac cmd + shift + k
多选及选中互换
ctr 按下可选择另一个区域
Mac cmd

-
互换
ctr + shift + x
cmd + shift + x
截屏2021-03-1016.56.34.png
选中相同词
- Mac cmd + d 按一次多选中一个
- Win ctr + e

- 批量选中全部相同词(不建议在此模式下修改,会选中不想干的内容,包含这个词的都会)
Mac ctr + alt + d
Win ctr + alt + e
使用Ctrl+Shift+e(mac是Cmd+Shift+d),会智能识别语法,剔除不相干的词。(亲测不好使,因情况而异)

以下为一些简单的使用方法
-
快速跑起一个web项目或者看原型文档。
截屏2021-03-1017.24.30.png
- 1、将目录拖进编辑器或者打开目录
-
2、工具栏点击运行至。。。
截屏2021-03-1017.26.14.png
插件安装


点击前往插件市场搜索需要的插件

- 点击使用HBuilderX 导入插件会自动安装
或者下载zip 解压 cd 到目录下 npm install
- 点击使用HBuilderX 导入插件会自动安装
创建项目

可快速创建项目,免命令行配置
网友评论