HBuilderX入门教程

HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能,清爽的界面,强大的功能和于一身。

本文档面向入门用户,建议初学者仔细研读。

介绍

  1. 执着于更快一步的理念,hx的左侧项目管理器是单击响应而不是双击。
  2. 单击展开目录,单击预览文件,双击打开文件。
  3. 预览文件时顶部标签卡是斜体的,此时继续预览其他文件会替换预览标签卡。双击文件后标签卡为正体,不会被替换。预览的文件一旦开始编辑,也会自动变为正式打开状态。
  4. 项目管理器默认是不显示图标的,可以将鼠标移到项目管理器区域,右上角会悬浮菜单,在里面可以选择显示图标。HBuilderX支持业内多种图标插件,可以在工具-插件安装中找到更多图标插件。
  5. hx的文件保存是免丢失的,并且有热退出功能。所谓热退出,就是关闭hx时不要保存文件。再次打开时仍然是之前的状态。未保存的文件也会继续原样展现。
  6. hx默认带有每30秒保存一次临时文件的策略(可以在设置里调节时间间隔)
  7. 不管是关闭hx,还是断电、崩溃,临时文件始终会自动保存。
  8. 前端预编译型语言越来越多,每次保存都触发编译比较消耗资源,有了hx,可以专注写代码而不需要隔一会按一下ctrl+s,需要编译时再保存,或编辑多个文件后按ctrl+alt+s全部保存。

语法提示

拥有自研的世界级语法分析引擎一直是HBuilder系列产品傲视业内的资本。
但前端框架众多,框架的语法提示需要加载单独的语法提示库。

框架语法提示库是在页面的右下角选择。(如下图示例)

注意:

  1. 框架语法库是挂在项目下的,一个项目加载了一个框架语法库后,这个项目下所有js文件或HTML文件都会在代码助手提示这个框架的语法。
  2. 但如果一个文件是单独从硬盘打开,没有整项目拖入hx,那么此时无法加载框架语法库。

代码助手


hx的代码助手,可以按alt+数字选择直接选择某个项目,类似中文输入法数字选词 (如下图示例)

语法帮助


光标放到某api处,按下F1,就可跳转到这个api的官方手册。目前支持vue、uni-app、5+等api (如下图示例)

编辑器与项目管理器的同步


hx默认是打开的标签卡和项目管理器自动关联,切换标签卡时项目管理器也会跟随变化,如不需要此功能,可以将鼠标移到项目管理器区域,右上角会悬浮菜单,在里面可以取消“与编辑器同步”。(如下图示例)

一般多项目时建议取消同步功能。

取消同步后,如需手动定位标签卡所在的项目,可以对编辑器点右键-“在项目管理器中定位”。(如下图示例)

多光标


hx支持多光标,按 ctrl+鼠标左键 就可增加一个光标,ctrl+鼠标右键 可取消一个光标或选区。(如下图示例)

还可以选择相同词。ctrl+e (mac是cmd+d)可选中相同的词做批处理。(如下图示例)

多光标是极客必备工具,高级技巧请参考:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13191

列选择


hx的列选择,是alt+鼠标拖选。或者用快捷键ctrl+alt+↑或↓。(如下图示例)

着色高亮


当你打开一个不认识的文档时,即hx的无法高亮着色,可以在右下角选择使用其他编辑器打开。

当你打开一个文件编码错乱,产生乱码时,也可以在右下角选择编码重新打开。(如下图示例)

文件快速打开


在顶部工具栏直接搜索工程下的文件名并打开,或者使用快捷键ctrl+p。(如下图示例)

比较常用的文件,可以在工具栏里添加到收藏夹。(如下图示例)

ctrl+p也是标签卡管理的重要工具,屏幕窄看不清左右打开的标签时,可以用它来浏览所有以打开的标签

目录内搜索


项目管理器点右键,选:查找字符串(当前目录),可在该目录下所有文件中搜索字符串(如下图示例)

缩进调整


hx默认使用tab缩进,tab长度为4个空格。

如果你需要调整缩进长度,比如tab长度为2个空格,在工具设置-编辑器中调整。(如下图示例)

如果不喜欢使用tab而喜欢使用空格,也可以在设置中调。注意这个调节只是编辑器里敲tab按键时转为了空格,格式化时仍是tab。

调节格式化设置,参考菜单工具-插件配置。hx支持几种格式化插件,他们都有自己的配置定义文件,请按插件配置中的说明修改设置。(如下图示例)

比如格式化插件Formator-Prettier,它的配置文件为:【工具】【插件配置】【formator-frettier】【formator.config.js】(如下图示例)

在菜单编辑-缩进中,可文件的缩进从tab转空格或从空格转tab。

语法校验


hx的语法校验都是插件,在工具插件安装中选择各种校验插件,不同语言的校验插件不一样。安装校验插件后,保存文件时会自动执行语法校验。(如下图示例)

校验概要结果会显示在状态栏,比如有2个错误(如下图),可以按F4切换到不同的错误处,画有红波浪线(如下图),鼠标移到红波浪线上会显示具体的错误信息。(如下图示例)

你也可以不保存,直接点菜单工具-验证本文档校验语法 来进行校验。(如下图示例)

svn/git项目导入


以git为例:(git项目:需要安装git插件、以及TortoiseGit、并配置ssh秘钥)(如下图示例)

预编译器(less/sass)


在【菜单】-->【插件安装】里有各种语言的预编译器,比如less、ts等。安装预编译器后,hx下的所有项目均可用共用。

sass示例: (如下图示例)

预编译器安装后使用入口在外部命令菜单中

sass/less插件配置小技巧:

less、sass可以在插件配置里,配置为保存文件时自动编译。

安装less或sass插件后,进入菜单【工具】【插件配置】【compile-less】,点击package.json文件,将onDidSaveExecution修改为true。注意修改后需要重启HBuilderX才能生效

复制代码{
"onDidSaveExecution": true
}
教程源网址
http://ask.dcloud.net.cn/article/35357

------------------------------

高级技巧网址:

http://www.dcloud.io/hbuilderx.html

HbuilderX的更多相关文章

  1. hbuilder、hbuilderx和vscode对比

    1. 从内存来对比 1.1 vscode占用内存 打开同一个项目,发现vscode占用内存比较多 1.2 HBuilder占用内存 1.3 HBuilderx占用内存 1.4 对比 从内存上来看,HB ...

  2. vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题

    vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题 vue用hbuilderX打包app就可以了,不过有兼容性问题,转换rem的用不了,嵌入到app的webview里面变得很小了,另外 ...

  3. HbuilderX 常用快捷键

    最新2019.3.30版本已经添加idea的快捷键,就不需要再额外记住HbuilderX的快捷键啦~ 链接 输入a,按下tab 加粗 ctrl+B 换行 需要换行的那一行后面加2个空格(或者按下tab ...

  4. APP-2.1-Hbuilder与夜神 & HbuilderX与夜神模拟器连接

    经上一步完成Hbuilder.HbuilderX与夜神模拟器的安装,本次介绍下两者之间的连接设置. 1.三者的安装路径 Hbuilder:E:\SAP UI5\HBuilder HbuilderX:D ...

  5. 使用HBuilderX实现打包vue项目成app

    一.准备开发工具 开发工具:HBuilderX 官网地址:http://www.dcloud.io (标准版需要自己安装插件,app开发版已经把app开发常用的插件安装好了,开箱即用,建议使用开发版) ...

  6. HBuilderX使用Vant组件库

    HBuilderX使用Vant组件库 HBuilderX是一款由国人开发的开发工具,其官网称其为轻如编辑器.强如IDE的合体版本.但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装V ...

  7. 快速、优雅的前端IDE之H-builder-X

    为什么介绍的是HBuidler-X而不是Hbuilder   HX是全新的一个软件,它抛弃了eclipse架构,使用C++为基础架构.HX目前还不能完全替代HBuilder.但在markdown记事的 ...

  8. HBuilderX打包成安卓或苹果app之后的调试问题,避免每次都要打包

    一.使用VScode安装 Live Server插件 二.使用:安装成功后---->>新建一个index.html 写入内容如下图所示 注:href地址是你在电脑上启动该项目的访问地址(此 ...

  9. HBuilderX 5+APP MUI 入门

    这一套东西是用来开发app的,可以用html.js什么的写app然后给你打包就能安装到手机上,也可以轻易跨端(需要使用vue,然而我还没有熟练). HBuilder:一个敲代码的软件,敲前端代码超级方 ...

随机推荐

  1. MySQL存储引擎的介绍

    数据库存储引擎是数据库底层软件组件,数据库管理系统使用数据引擎进行创建.查询.更新和删除数据操作.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引擎还可以获得特定的功能. ...

  2. JqueryAjax 常用复制

    $.ajax({ type : "POST", url : "", data : {}, success : function(data) { } }); $. ...

  3. ArcGIS Runtime SDK for Android 定位权限(GPS定位\网络定位)

    ACCESS_COARSE_LOCATION和ACCESS_FINE_LOCATION: android.permission.ACCESS_COARSE_LOCATION:是基站定位,即基于无线网络 ...

  4. Vue动画操作

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  5. 后台对象转JSON字符串传到前台,前台JSON字符串转对象绑定标签赋值

    /// <summary> /// 创建换货单-自动获取对应的数据(后端) /// </summary> [HttpGet] public ActionResult GetPr ...

  6. apache 防盗链

    方法1:Apache防盗链的第一种实现方法,可以用rewrite实现 (1.)首先要确认Apache的rewrite module可用,打开 httpd.conf 文件,如果前面有注释去掉 LoadM ...

  7. Spring Cloud 之 全局配置

    在微服务架构中,全局配置的重要性不言而喻.SpringCloud的全局配置存储主要基于 Git 来实现,即配置信息存储在Git服务器,以统一的方式对外提供访问.在使用上分为 ConfigServer和 ...

  8. 如何写好demo——学习感悟

    文章标题:教你如何写好Demo应用 如何制作出最有用的demo呢? 简,易 在demo中,我们要专注于单一的主题.我们的教学覆盖了很大的知识范围,因此,化整为零是非常必要的. 例如,我们要说明Andr ...

  9. 三维视觉、SLAM方向全球顶尖实验室汇总

    本文作者 任旭倩,公众号:计算机视觉life,编辑成员 欧洲 英国伦敦大学帝国理工学院 Dyson 机器人实验室 http://www.imperial.ac.uk/dyson-robotics-la ...

  10. MyBatis_[tp_50]_动态sql_bind绑定 与原生sql对比

    笔记要点出错分析与总结 更推荐,原生的sql写法,bind方法不灵活! Test中: e.setLastName("%e%"); 直接在这里写上模糊查询的语句,更加省时 配置中: ...