HBuilder X快捷键

多光标

• ctrl + 鼠标左键
• ctrl + 鼠标右键
• ctrl + e
• Ctrl+Shift+e

列选择

• alt+鼠标拖选
• 或者用_ctrl+alt+↑或↓_

转到定义

• alt + d
• alt + 鼠标左键单击
• ctrl + alt + 左键
• alt+ left 或工具栏上的<
• 输入_0_跳转到_首行_、输入_$跳转到_最后一行

文件、搜索

• ctrl+p
• ctrl + tab
• ctrl + shift + o
• 选中一段文本，按下_ctrl + shift + f_

在选中区域外围添加标签

• 选中首尾tag,按 _ctrl + ] _
• 在js中，按下 ctrl + ]

反包围

• 双击tag开头，选中tag
• 按下 ctrl + shift + ]

扩大选区

• = 是 + 的默认键，所以_ctrl + = _就是ctrl和 + 键一起按下 .

交换选区内容

• 选中第一个要交换的内容
• 按下_crtl_ ，选中第二个要交换的位置
• 按下_ctrl + shift + x_ ，交换

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

• 双击选中内容
• 按_Ctrl + e_
• 按_Ctrl + Shift + z_
• 多选了一个词，ctrl + 鼠标右键
• alt + shift + e

批量合并行

• 双击{内侧选中class
• 按Ctrl+双击选中另一个class
• 按反格式化_Ctrl+Shift+k_
• _ Ctrl+k_是格式化代码，那么_Ctrl+Shift+k_就是合并为一行。

同时注释if段首尾

• 双击if选中if代码块
• 按_Ctrl+_在选区首尾加光标，变成多光标模式
• 按_Ctrl+/_注释掉选区首尾行

HBuilderX 语言服务/代码提示，在函数、类前面放置

• 支持扩展jsdoc+,

  /**
  	* @alias aliasName   // 别名
  	* @constructor  // 标识一个函数是构造函数
  	* @description 描述内容
  	* @example 示例内容
  	* @extends {Type} // 标识继承于某个类型
  	* @param {Type[,Type,...]} 参数名=[可选择值1|可选择值2|...]] 参数描述
  	* @property {Type[,Type,...]} 属性名 属性描述
  	* @return {Type[,Type,...]} // 描述一个对象的属性
  	* @type {Type[,Type,...]}  // 定义某个变量的类型
  	*/

vue doc – vue组件说明，类jsdoc

/**
	* 这里是一个组件描述，会在提示标签的时候显示
	* @description 这里也是一个组件描述
	* @tutorial 参考地址
	* @property {String} type = [button|input|...值域] 这里是属性描述，{}中间的是类型
	* @event {Function} tap 这是是事件描述，类型必须是Function
	* @example 这里是示例代码
	*/

常用代码块

• js 代码块

敲的值	描述
kv	Key: Value 代码块 ，js中使用json时生效
ife	if…else结构
iff	简单if
forr	for循环结构体
fori	for循环结构体并包含i
funn	函数
funa	匿名函数
clog	打印日志
clogvar	打印变量命名和值

• dom 代码块

敲的值	描述
dg	document.getElementById
dl	$(“”)

• vue 代码块

  • v ：各种vue代码块

• uni-app 代码块

  • u ：各种uni-app代码块，还有ifios、ifandroid，这2个平台判断代码块

• Emmet

  • 缩写时不能空格
    • 嵌套运算符
      • > ： 元素随着>一层一层向里嵌套
      • + ： 元素放置在同一水平上
      • ^ ： ^后携带的元素，可以向>嵌套的元素向上一层移动，一个^向上移动一层
      • * ： 输出几次
      • () ： 分组
    • 属性运算符
    • 标签后带# : 生成id选择器
    • 标签后带. : 生成class选择器，可混合写和连写
    • 标签后带[] : 生成的语法，带有[]所写属性值
    • 项目编号$
      • li.item$*5 单个从1开始编号
      • li.item$$$*5 多个用0来替代数字
      • li.item$@-*5 从大到1开始编号
      • li.item$@3*5 从3开始编号，生成五个
      • li.item$@-3*5 从大到3开始编号
    • 标签后带{} ：像元素添加文本

• json优化

  • 中文符号免干扰输入
  • 回车时自动补全行尾逗号
  • 保存时自动删除数组或键值对结尾的多余逗号
  • keyValue代码块
  • 智能双击，快速选中数组或键值对
  • 快速重复插入
    • Ctrl+Insert或Ctrl+Shift+r
  • 语法提示
  • 保存时自动校验语法

• markdown优化

  • 标题: 敲h2+Tab即可生成二级标题
  • 图片: img后敲Tab
  • 链接: a后敲Tab
  • 表格: table3*3后敲Tab，表示生成3行3列的表格，行首生效
  • 分割线: hr后敲Tab
  • 代码块: code后敲Tab，行首生效
  • day后敲Tab，当前日期。注意day需在行首或前面有空格
  • time后敲Tab，当前时间。注意time需在行首或前面有空格
  • 文字加粗: b后敲Tab
  • 文字倾斜: i后敲Tab
  • 注释：快捷键Ctrl+/快速插入注释
  • 标记：使用html语法：

    备注：
    <sup>是上标
    <a>是超链接，herf是指向的位置
    用法：
    这是标记<sup><a href="#ref3">3</a></sup>
    <p name="ref3">标记内容的阐述区域，标签看情况给，只要name与href指向的一样就行</p>

  • 强大的智能粘贴
  • 强大的智能双击
  • 强大的整理功能
    • Ctrl+K可以自动整理表格格式
  • 直观的文档结构图
  • Alt+w
    • Ctrl+Shift+o
  • 实用的任务列表
  • 任务列表-未完成任务 快捷键：Ctrl+Alt+[
    • 任务列表-已完成任务 快捷键：Ctrl+Alt+]
  • 路径提示
  • markdown一键分享
  • 跨文件跳转标题
  • Mermaid流程图
    • 流程图布局方向

标志	方向
TB	top bottom - 从上到下
BT	top bottom - 从上到下
BT	top bottom - 从上到下
LR	left right - 从左到右
TD	等同于 TB

- 流程图对应图形标识

图形	代表
圆角矩形	(desc)
矩形	[desc]
圆形	((desc))
椭圆形	([desc])
子例程形	[[desc]]
圆柱体	[(desc)]
双圆	(((desc)))
菱形	{desc}
非对称	>desc]
六角形
平行四边形–右倾	[/desc/]
平行四边形–左倾	[\desc]
梯形–正向	[/desc]
梯形–反向	[\desc/]
带箭头的链接	–>
不带箭头的链接	—
链接上的文字	– desc —
带有箭头和文本的链接	A– desc –>B
虚线链接	A-.->B
带文本的虚线链接	A-. text .-> B
粗链接	A ==> B
包含文本的粗链接	A == text ==> B
看不见的链接	A ~~~ B
a可以指向b和c	a –> b & c
新的箭头类型	A –o B 或 B –x C
多方向箭头	B <–> C

• 基本语法

  写在```mermaid ```里面
  graph LR  // 选择图形方向
  c1-->a2
  subgraph 第一组  // 从 subgraph 到 end 表示一组
  a1-->a2
  end