HBuilderX 是由DCloud开发的一款面向Web前端开发者的集成开发环境（IDE），它是HBuilder的下一代产品，继承了HBuilder的诸多优点，并在此基础上进行了全面的升级。HBuilderX旨在提供更加强大、高效的开发体验，支持多种前端技术栈，包括但不限于HTML5、CSS3、JavaScript、Vue.js、React、Angular等。

功能特点

• 快速启动：启动速度快，能够在几秒内启动，这对于频繁切换任务的开发者来说是非常有用的特性。

• 智能提示：提供了丰富的代码补全和提示功能，能够提高编写代码的速度和准确性。

• 实时预览：支持实时预览功能，开发者可以直接在编辑器中看到代码修改的效果，无需频繁切换浏览器。

• 多页面编辑：支持多页面同时编辑，可以在同一个窗口中打开多个文件，方便进行对比和同步修改。

• 多光标操作：支持多光标编辑，允许用户一次编辑多处相同代码，提高编码效率。

• HTML5/CSS3支持：内置对HTML5和CSS3的支持，包括新特性的语法高亮和代码提示。

• Git集成：内置Git支持，方便开发者进行版本控制和团队协作。

• 代码美化：提供代码格式化功能，帮助开发者保持代码整洁。

• 文件压缩打包：支持JavaScript、CSS文件的压缩合并，减少HTTP请求次数，提高网页加载速度。

• 调试工具：拥有内置的调试工具，便于开发者进行前端代码的调试。

• 扩展插件：支持插件扩展，用户可以根据需要安装额外的插件来增强IDE的功能。

• 模板支持：内置了多种模板，包括常用的框架模板，方便快速搭建项目。

下载及安装：

HBuilderX官网下载地址：https://www.dcloud.io/hbuilderx.html，可以在下载页面选择Windows或MacOS平台，Windows平台压缩包下载后解压即可运行。

HBuilderX首次运行时会出现主题和快捷键选择窗口，可以选择喜欢的主题和习惯的操作方式。点击【开始体验】按钮后，可以在HBuilderX自述文件中查看HBuilderX的特性。

基本操作：

语法提示：工具提供多种框架语法提示库，可以在窗口右下角进行选择。

代码助手：工具提供智能的代码提示助手，可按【ctrl+I】打开代码助手，代码提示后可以按【alt+数字】选择直接选择某个项目。

语法帮助：在编辑区域鼠标悬停会自动弹出语法或说明提示，按下【F1】键可以跳转到官方手册（2.5.7以上版本会在外部浏览器打开说明文档）。

多光标操作：在编辑区域按【ctrl+鼠标左键】可增加一个光标，【ctrl+鼠标右键】可取消一个光标或选区。

相同词操作：在编辑区域按【ctrl+shift+L】可以选择和光标位置相同的所有词同时进行编辑。

列选择：在编辑区域使用【alt+鼠标拖选】进入列选择编辑方式。

Emmet支持：Emmet语法可以用缩写来动态生成所需要的结构及样式，从而极大改善HTML和CSS的编写流程。

智能双击：

• 双击引号/括号内侧，选中引号/括号内的内容

• 双击逗号两侧，选择逗号前一段或后一段

• 双击行尾，选中该行(不含回车符)

• 双击连词符（-_）选中整个词

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

• 双击行首缩进，选择相同缩进的段落

• 双击列表符号，选择列表段落

• 双击Tag开头或结尾，选择整段Tag

• 双击属性赋值等号=，选择Html属性

• 双击if、function等关键字，选择整段包围区域

• 双击分号，选择js等语言的;分号前段落

• 双击css类名左侧，选择Css类

• 双击注释符选择注释区域

• 双击#选择markdown标题段落

• 双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区

还有更多的操作和编辑技巧可以查看官方文档：https://hx.dcloud.net.cn/​

另外，软件对vue开发做了大量优化，新版本仅支持uni-app、uni-app cli、vue2-cli、vue3-cli项目中可以切换vue语法提示库；对Markdown文件编辑提供了强大支持，支持Emmet、快捷键编辑、智能粘贴、路径提示、Mermaid流程图等；对Json编辑进行了优化；支持开发小程序；可以创建uni-app项目；支持java插件、nodejs插件，并兼容了很多vscode的插件及代码块。

总之，HBuilderX非常适用于Web前端开发人员，特别是在进行HTML5相关的项目开发时非常高效。此外，由于其对多种语言的支持，也可以作为通用的轻量级开发工具使用。

阅读原文：原文链接