HBuilder X

HBuilder X 是一款专为编程开发者量身打造的高效开发工具。它凭借超快的启动速度以及简洁舒适的界面，为编程工作营造出极为流畅的体验。作为新一代开放服务工具，它依托持续更新的云知识库，助力开发者更专注于解决实际问题，同时积极推动 HTML5 的加速发展。其内置的最全语法库，还能方便开发者查看各语法在不同浏览器中的兼容状况。

HBuilder X 巧妙融合了 IDE 和编辑器的优势，既具备强大的语法分析、代码提示、转到定义和调试功能，又支持高效的通用文本处理，真正做到了小巧而强大。如果您正在寻觅一款能优化开发流程的工具，不妨下载体验 HBuilder X，它或许会成为您开发路上的得力伙伴。

HBuilder X 功能特点

1. 轻巧极速

10M 的绿色发行包，采用 C++ 架构，无论是启动速度、大文档打开速度，还是编码提示，都能极速响应，让开发者无需漫长等待。

2. 强大语法提示

拥有一流的 ast 语法分析能力，语法提示精准、全面且细致，转到定义、重构等功能完善，为开发者提供高效的编码辅助。

3. 专为 Vue 打造

相较于其他工具，它为 Vue 开发提供了更出色的支持，能显著提升 Vue 开发效率，让 Vue 项目开发更加得心应手。

4. 清爽护眼

界面清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面，能有效保护手腕，减缓鼠标手问题。

5. 高效极客操作

对字处理提供了强大支持，具备更强大的多光标、智能双击、选区管理等功能，满足开发者多样化的操作需求。

6. 处理效率大幅提升

例如，开发者可以轻松选中想要处理的多端、文字区块，还能方便地同时注释掉不同行的内容，提高代码处理效率。

7. Markdown 优先

HX 是唯一一个新建文件默认类型为 markdown 的编辑器，也是对 md 支持最强的编辑器。开发者甚至可以直接粘贴表格、图片进来，建议技术人员用 markdown 替代 txt。

HBuilder X 编辑器使用技巧

1. 免拖动选择

用鼠标拖动选中一片文本，容易让食指抽筋，触摸板操作更是痛苦，背诵大量快捷键也让人头疼。HBuilderX 提供了更友好的方式：智能双击和 Ctrl+= 扩大选区。

2. 智能双击

- 双击 div 的首或尾可选中这个 tag，双击 if、缩进符、括号引号内侧等很多位置，都能通过智能双击选中，具体可查看 HBuilder 的选择菜单。

- 按 Ctrl+] 包围，可在选区首尾加父标签，同时闪烁光标。在 js 里按下 Ctrl+] 不会包围 tag，而是包围 if、for 等函数库。

- 输入 div 即可在首尾添加包围标签。

3. 扩大选区 Ctrl+=

“=”是“+”的默认键位置，Ctrl+= 就是 Ctrl 键和“+”号一起按下。在 HBuilderX 里，它能智能判断选区范围，持续扩大选区，实现无鼠标快速选中所需内容。

4. 反包围

- 双击 tag p 开头，选中该 tag。

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

5. 快捷键理念

HBuilderX 的快捷键理念是符号化，而非字母化。很多工具的快捷键是控制键 + 功能英文单词中的一个字母，难以记忆。符号化让快捷键记忆变得简单，如 Ctrl+] 是包围，反操作或增强操作一般加 Shift，如 Ctrl+Shift+] 是反包围。

6. 选中相同语法词

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

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

- 之后就可以方便地将原 div 改名为 p。选择一个括号时，也可使用此功能选中对应的另一个括号。

7. 交换选区内容

交互两个选区内容时，传统操作（选中 a、剪切、点 b 前面、粘贴、选中 b、找到之前 a 的位置点击、粘贴）效率低下。HBuilderX 的 Ctrl+Shift+x 交互选区（Ctrl+x 的增强版）可解决此问题。

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

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

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

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

选区选多了或选错了，无需从头再选，Ctrl+Shift+z 不是撤销编辑内容，而是撤销最后一个选区。

- 双击选中 class。

- 按 Ctrl+e 选中相同词。

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

9. 批量合并行

以下示例是把 css 合并为一行时的快捷操作。

- 双击{内侧选中 class。

- 按 Ctrl+双击选中另一个 class。

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

10. 同时注释 if 段首尾

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

- 双击 if 选中 if 代码块。

- 按 Ctrl+ 在选区首尾加光标，变成多光标模式。

- 按 Ctrl+/ 注释掉选区首尾行。