深井冰_01
深井冰_01
  • 发布:2014-05-27 15:18
  • 更新:2022-11-03 16:49
  • 阅读:37226

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

分类:HBuilder

按住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. 无论如何,单独文件直接打开而不创建项目是无法跳转的。
5 关注 分享
cike8899 飞鱼 南安 chobits4 rysnone

该文章目前已经被锁定, 无法添加新评论

深井冰_01

深井冰_01 (作者)

回复 codecode :
可以说的详细些或者加我qq 248590311 私聊吧
2016-07-12 17:41
codecode

codecode

为什么不能跳转 JS的function。
2016-07-12 16:39
深井冰_01

深井冰_01 (作者)

回复 chobits4 :
alt+左键(我们的快捷键语法是alt是跳转),工具-HBuilder-编辑器中可设置使用alt或者ctrl
2015-10-10 21:00
chobits4

chobits4

回复 DCloud_heavensoft :
<div class="name test">,webstorm里可以通过按住ctrl加左键,跳转到定义“name test”的文件,请问,Hbuilder如何实现?
2015-10-10 10:24
DCloud_heavensoft

DCloud_heavensoft

回复 hpking :
我们确认HBuilder的跳转功能比webstorm强,你可以认真对比。
2015-08-03 16:38
hpking

hpking

回复 飞鱼 :
的确是,相比webstorm,还是弱很多的,建议直接以idea为基础开发,而不是ecplise这东西
2015-06-14 09:46
深井冰_01

深井冰_01 (作者)

回复 飞鱼 :
现在不是这样吗?是不是你html里定义了一个这样的class,在别的css文件里也定义了,此时木有分析出到底是哪个class生效?所以出现列表让你选择?额,这样回来回去效率有点低,方便的话请加我qq 248590311 详聊
2015-02-25 16:56
飞鱼

飞鱼

回复 深井冰_01 :
我知道是要有个功能键,也许是我操作的问题。
我想说明的不是要不要按alt或者Ctrl键,这个按键是肯定需要的。

是说的,按住后,div的class,跳转打开对应的css文件,而不是在html里选择相同的class。
2015-02-23 22:28
深井冰_01

深井冰_01 (作者)

回复 飞鱼 :
不添加一个功能键的话,如何知道是要将光标移动到navbar上还是有跳转呢?所以webstorm实际上是ctrl+点击而不是直接点击(不知道是不是你设置过哈)。HBuilder定义快捷键语法时,将alt赋予了跳转的含义,所以,是alt+点击
2015-02-23 21:14
飞鱼

飞鱼

把这个支持一下,支持选择器里.class写法的跳转
在webstorm里面是可以直接 <div class="navbar"> 点击navbar跳转到对应的css文件中去的。

这样会很不错。
2015-02-19 22:37