REC

免费的轻量级代码编辑器 HBuilderX

易航
1年前发布 /正在检测是否收录...

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的特性。

图片[1] - 免费的轻量级代码编辑器 HBuilderX - 易航博客

基本操作

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

图片[2] - 免费的轻量级代码编辑器 HBuilderX - 易航博客

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

图片[3] - 免费的轻量级代码编辑器 HBuilderX - 易航博客

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

图片[4] - 免费的轻量级代码编辑器 HBuilderX - 易航博客

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

图片[5] - 免费的轻量级代码编辑器 HBuilderX - 易航博客

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

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

图片[6] - 免费的轻量级代码编辑器 HBuilderX - 易航博客

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

图片[7] - 免费的轻量级代码编辑器 HBuilderX - 易航博客

智能双击:

  • 双击引号/括号内侧,选中引号/括号内的内容
  • 双击逗号两侧,选择逗号前一段或后一段
  • 双击行尾,选中该行(不含回车符)
  • 双击连词符(-_)选中整个词
  • 双击折叠行首内容开头,选择折叠段落
  • 双击行首缩进,选择相同缩进的段落
  • 双击列表符号,选择列表段落
  • 双击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相关的项目开发时非常高效。此外,由于其对多种语言的支持,也可以作为通用的轻量级开发工具使用。

© 版权声明
本站用户发帖仅代表本站用户个人观点,并不代表本站赞同其观点和对其真实性负责。
转载本网站任何内容,请按照转载方式正确书写本站原文地址。
THE END
喜欢就支持一下吧
点赞 0 分享 赞赏
评论 抢沙发
取消 登录评论