HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

如何使用HBuilder快速编写代码?

HBuilder HTML5 技巧 入门

新建web项目时,有一个Hello HBuilder的工程模板。
按里面的教程敲一遍,就能基本掌握HBuilder快速编码的技巧。
代码输入法、代码块、强大的语法提示、智能补齐、Emmet、模糊匹配、快捷键语法、跳转助手、选择助手,一系列无鼠标操作使得HBuilder远快于其他开发工具。

任何人,如果使用其他开发工具敲Hello HBuilder里lesson1的代码快于HBuilder,请录像给我们,我们将送上10万积分和一个Cherry机械键盘!

继续阅读 »

新建web项目时,有一个Hello HBuilder的工程模板。
按里面的教程敲一遍,就能基本掌握HBuilder快速编码的技巧。
代码输入法、代码块、强大的语法提示、智能补齐、Emmet、模糊匹配、快捷键语法、跳转助手、选择助手,一系列无鼠标操作使得HBuilder远快于其他开发工具。

任何人,如果使用其他开发工具敲Hello HBuilder里lesson1的代码快于HBuilder,请录像给我们,我们将送上10万积分和一个Cherry机械键盘!

收起阅读 »

转到定义 如何跳转追踪至CSS的class或JS的变量方法或HTML的id定义的地方?

转到定义 跳转 追踪

按住Alt+鼠标左键即可转到定义,快捷键是F12。
图示:

跳转后返回之前的光标位置,HBuilder是ctrl+q,HBuilderX是alt+left,也支持鼠标的后退键。

HBuilderX还支持ctrl+alt+鼠标左键,通过分栏打开新文档,这样可以并排查看。

HBuilder的跳转功能超过一般工具。
目前支持跳转的内容包括:

  1. js中定义的变量和函数。在引用变量或函数时,可以跳转到定义的位置,包括HTML中同文件内部跳转及HTML向js文件的跳转。
  2. css中定义的样式。在引用的class里可以跳转到对应的css定义处,包括HTML中同文件内部跳转及HTML向css文件的跳转。但目前还不支持选择器里.class写法的跳转。
  3. HTML中定义的元素id。在js里使用document.getElementById("div1"),这里的div1也是可以跳转的。但目前还不支持#id写法的跳转。
  4. 文件跳转。在HTML、js、css、图片、多媒体音视频等文件被引用等地方,可以直接跳转打开该文件。

几个注意:

  1. 使用alt而不使用ctrl,一是因为ctrl+鼠标左键是多光标和选相同词,有冲突,二来HBuilder的快捷键体系定义里,alt代表跳转。
  2. 文件要有引用关系才能跳转,比如HTML里引用了css文件或js文件,才能从HTML里跳转到css或js文件里
  3. 目前选择器里#id和.class写法的转到定义还不支持,后续升级会补充这些功能。
  4. 如果出现无法跳转的情况,有2种可能,一是项目刚建立,索引还没完成,需要等右下角的索引进度完成才能跳转;二是索引被某些操作破坏,此时需要对工程点右键-扫描索引-重新建立索引。
  5. 无论如何,单独文件直接打开而不创建项目是无法跳转的。
继续阅读 »

按住Alt+鼠标左键即可转到定义,快捷键是F12。
图示:

跳转后返回之前的光标位置,HBuilder是ctrl+q,HBuilderX是alt+left,也支持鼠标的后退键。

HBuilderX还支持ctrl+alt+鼠标左键,通过分栏打开新文档,这样可以并排查看。

HBuilder的跳转功能超过一般工具。
目前支持跳转的内容包括:

  1. js中定义的变量和函数。在引用变量或函数时,可以跳转到定义的位置,包括HTML中同文件内部跳转及HTML向js文件的跳转。
  2. css中定义的样式。在引用的class里可以跳转到对应的css定义处,包括HTML中同文件内部跳转及HTML向css文件的跳转。但目前还不支持选择器里.class写法的跳转。
  3. HTML中定义的元素id。在js里使用document.getElementById("div1"),这里的div1也是可以跳转的。但目前还不支持#id写法的跳转。
  4. 文件跳转。在HTML、js、css、图片、多媒体音视频等文件被引用等地方,可以直接跳转打开该文件。

几个注意:

  1. 使用alt而不使用ctrl,一是因为ctrl+鼠标左键是多光标和选相同词,有冲突,二来HBuilder的快捷键体系定义里,alt代表跳转。
  2. 文件要有引用关系才能跳转,比如HTML里引用了css文件或js文件,才能从HTML里跳转到css或js文件里
  3. 目前选择器里#id和.class写法的转到定义还不支持,后续升级会补充这些功能。
  4. 如果出现无法跳转的情况,有2种可能,一是项目刚建立,索引还没完成,需要等右下角的索引进度完成才能跳转;二是索引被某些操作破坏,此时需要对工程点右键-扫描索引-重新建立索引。
  5. 无论如何,单独文件直接打开而不创建项目是无法跳转的。
收起阅读 »

怎么才能快速掌握HBuilder开发技巧?Hello HBuilder

Hello HBuilder 技巧 入门 HBuilder

软件自带HelloHBuilder项目,该项目为教程项目(如果不小心删除了不要担心,可以在新建WEB项目时,使用HelloHBuilder模板新建出来),按照项目中的lesson1.txt中的快捷键敲一遍即可快速掌握HBuilder快速开发技巧。

Hello HBuilder的index页面默认只有注释,直接运行浏览器肯定是空白,不要意外。

Hello HBuilder的教程经常更新,如果HBuilder更新后提示Hello HBuilder也更新了,请删除本地的Hello HBuilder项目,新建web项目选Hello HBuilder,重新建一个项目。

继续阅读 »

软件自带HelloHBuilder项目,该项目为教程项目(如果不小心删除了不要担心,可以在新建WEB项目时,使用HelloHBuilder模板新建出来),按照项目中的lesson1.txt中的快捷键敲一遍即可快速掌握HBuilder快速开发技巧。

Hello HBuilder的index页面默认只有注释,直接运行浏览器肯定是空白,不要意外。

Hello HBuilder的教程经常更新,如果HBuilder更新后提示Hello HBuilder也更新了,请删除本地的Hello HBuilder项目,新建web项目选Hello HBuilder,重新建一个项目。

收起阅读 »