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相关的项目开发时非常高效。此外,由于其对多种语言的支持,也可以作为通用的轻量级开发工具使用。