DCloud_HB_WDL
DCloud_HB_WDL
  • 发布:2019-05-15 19:41
  • 更新:2019-09-11 13:28
  • 阅读:5937

HBuilderX:代码块说明及自定义代码块教程

分类:HBuilderX

代码块是快速开发的利器。简单的敲几个字母,回车,就能生成大段代码。

比如我们经常会敲if...else结构,在HBuilderX中,只需敲ife回车,就能直接生成相应的代码结构。

  1. 敲ife
  2. 回车后生成if结构体

HBuilderX已经内置了大量常用的代码块,熟悉这些代码块,对于提高编程效率有重要帮助。

查看内建的代码块,点菜单-工具-代码块设置,选择你要查看的语言的代码块。

打开的界面中,左侧即是预置的代码块,右侧是开发者可以自己扩展代码块的地方。

常用代码块列表

通用js代码块

  • iff :简单if
  • forr :for循环结构体
  • fori :for循环结构体并包含i
  • funn:函数
  • funa:匿名函数
  • clog:打印日志
  • clogvar:打印变量命名和值

    dom代码块

  • dg :document.getElementById
  • dl :$("")

    vue代码块

    敲v,即可拉出各种vue代码块

    uni-app代码块

    敲u,即可拉出各种uni-app代码块
    还有ifios、ifandroid,这2个平台判断代码块(HBuilderX 1.9.10+)

模板示例

自定义代码块都是配置json文件中的,直接来一个js例子吧,上述ife代码块的配置如下:

{  
"if ... else": {  
    "body": [  
        "if ($1) {",  
        "\t$0",  
        "} else{",  
        "\t",  
        "}"  
    ],  
    "prefix": "ife",  
    "scope": "source.js"  
}  
}

代码块配置格式说明

HBuilderX使用json定义代码块的格式,兼容vscode的代码块格式,也就是你可以把vscode里已经配置的自定义代码块方便的挪到HBuilderX中使用。

每个配置项的说明如下:

key

"key" :代码块显示名称,显示在代码助手列表中的名字。key是不能重复的。
上面例子中"if ... else"就是一个key

prefix

"prefix" :代码块的触发字符,就是敲什么字母可以激活这个代码块。

body

"body" :代码块的内容。内容中有如下特殊格式

$1 表示代码块输入后光标的所在位置。如需要多光标,就在多个地方配置$1;如该位置有预置数据且需要选中,则写法是${1:selectedtext};这里还支持下拉候选菜单,多选项即下拉候选列表使用${1:foo1/foo2/foo3}
$2 表示代码块输入后再次按tab后光标的切换位置tabstops(代码块展开后按tab可以跳到下一个tabstop,在HBuilderX中看到类似绿色光标的不闪的竖线,就可以按tab或回车跳转光标过去)
$0代表代码块输入后最终光标的所在位置(也可以按回车直接跳过去)。

双引号使用\"转义
换行使用多个数组表示,每个行一个数组,用双引号包围,并用逗号分隔
缩进需要用\t表示,不能直接输入缩进或空格!

triggerAssist

"triggerAssist" :为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示,拉出代码助手,默认为false

project

project: 将代码块控制在指定项目类型下生效。可取值有:uni-appWebAppWap2App

比如:"project": "uni-app",代表这个代码块仅在uni-app项目下生效

如果不设置,则该代码块在所有项目类型下均生效。

Web指普通项目,App指5+App项目。

如需设置多种项目类型,用逗号分隔。比如:"project": "uni-app,App"

注意事项

  1. 每个代码块以key为主键,多个代码块需要逗号分隔。
  2. 如果json语法不合法,编辑器状态栏会弹出错误信息,json中会画出红波浪线,请注意修正。
1 关注 分享
wh521518@163.com

要回复文章请先登录注册

897411954@qq.com

897411954@qq.com

自定义javascript注释代码块,但是在js文件中输入**并没有快捷提示,不清楚是什么原因,官方大大帮忙看一下,谢谢
```
{
"jsdescription": {
"prefix": "**",
"body": [
"/**",
"* 功能说明",
"* @Author xxx@xxx",
"* @DateTime ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
"* @param {Object} xx []",
"* @return {void} 无",
"*/"
],
"description": "Insert description"
}
}
```
2019-09-11 13:28
番薯

番薯

PHP代码块:"foreach": {
"prefix": "fore",
"body": [
"foreach ($list as $k => $v) {",
"$1",
"}"
],
"triggerAssist": false
} $会被过滤掉,$号这里应该怎么写?
2019-09-11 12:58
zqbgds@163.com

zqbgds@163.com

"console.log": {
"prefix": "logtwo",
"body": [
"console.log('$1');",
"\tconsole.log('$2');"
],
"triggerAssist": false,
"description": "Log output to console twice"
}
我把你们给的这个列子也放开了还是不好用
2019-09-10 16:07
zqbgds@163.com

zqbgds@163.com

"首页三标签": {
"body": [
"<title>{dede:global.cfg_webname/}</title>",
"<meta name=\"description\" content=\"{dede:global.cfg_description/}\" />",
"<meta name=\"keywords\" content=\"{dede:global.cfg_keywords/}\" />"
],
"prefix": "itdk",
"scope": "text.html.basic"
},
"<!--[if IE8]>": {
"body": [
"<!--[if IE]>",
"\t$1",
"<![endif]-->"
],
"prefix": "ifie8",
"scope": "text.html.basic"
}


试了一下不好用
下面的那个ie8是我参考ie6那个列子写的 也是不行
2019-09-10 15:54
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 2278697240@qq.com:
贴下定义的代码块
2019-08-23 15:40
2278697240@qq.com

2278697240@qq.com

自定义的代码块里面有$这个符号,该如何让他显示出来,这样转移没有用\$,并且不会触发
2019-08-22 11:42
i1goo@163.com

i1goo@163.com

回复 DCloud_HB_WDL:
```css
"console.log": {
"prefix": "cssreset",
"body": [
"html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address,big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul,li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption,footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}article, aside, details, figcaption, figure,footer,header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul{list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: \"\";content: none;}table {border-collapse: collapse;border-spacing: 0;}"
],
"description": "css reset code snippets by leouid"
}
```
2019-08-06 10:30
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 i1goo@163.com:
发下你设置的代码块
2019-08-05 19:24
i1goo@163.com

i1goo@163.com

请问一下,如何设置CSS的代码块,比如有有一段经常会写的重置样式,为了提高开发效率,我想把这CSS样式通过,输入如:cssreset 就直接把我设置好的代码块输出,求方法VScode都行,HB就是不知怎么搞...
2019-08-05 18:26
chenhao455@yeah.net

chenhao455@yeah.net

mark,这个功能太强大了,解决了我的痛点
2019-08-02 16:32
1549432048@qq.com

1549432048@qq.com

回复 DCloud_HB_WDL:
我在配置json代码块和vue组件内js代码块时,触发字符不生效;发现软件默认的触发字符配置有效,仿照默认配置加上scope(object.property.js和vue.property.js)后,就生效了,所以想了解一下scope的作用和有哪些可选值
2019-07-23 09:09
都没有好网名了

都没有好网名了

默写情况下没有切换英文,自定义短语无效,删除切换英文,此时搜狗的自定义短语还是很好用的
2019-07-22 21:48
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 1549432048@qq.com:
scope: 指的是生效范围,一般不用填写
2019-07-22 19:53
1549432048@qq.com

1549432048@qq.com

回复 1549432048@qq.com:
有大神清楚么?求指教
2019-07-22 15:46
1549432048@qq.com

1549432048@qq.com

请问自定义代码块中scope都有哪些可选值,作用是什么?
2019-07-22 12:03
Liew

Liew

回复 DCloud_HB_WDL:
和下面一位同学提到的一样,先打个空格才能正常触发。
2019-07-19 15:42
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 Liew:
把配置的代码块发出来
2019-07-19 15:04
Liew

Liew

X 2.1.2 配置了也不生效
2019-07-19 11:37
mingyong.g@foxmail.com

mingyong.g@foxmail.com

为什么我的自定义代码块无法触发,需要在前面键入一个非字母字符才能触发呢???
2019-07-18 21:09
lynn5423@126.com

lynn5423@126.com

我想设置CSS的代码块,一直没有成功过,直接示例代码块去掉注释也是不行,不知道是不是我的设置问题,我用的是hbuilderx 2.1
2019-07-15 18:22
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 cxg417:
目前不行
2019-07-05 17:36
cxg417

cxg417

代码提示框的窗体大小能否自定义,或者可拖拽大小,谢谢
2019-07-05 15:34
cxg417

cxg417

回复 cxg417:
用<br/>解决了。
2019-07-05 15:28
cxg417

cxg417

回复 DCloud_HB_WDL:
好像不支持数组换行
2019-07-05 15:21
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 cxg417:
在代码块内,增加description字段,比如
```json
{
"console.log": {
"prefix": "logtwo",
"body": [
"console.log('$1');",
"\tconsole.log('$2');"
],
"triggerAssist": false,
"description": "我是例子"
}
}
```
2019-07-05 12:25
cxg417

cxg417

能否增加个描述模块,当代码提示框弹出提示时,上面有此代码的描述或说明,谢谢
2019-07-05 11:47
wangdunhao@foxmail.com

wangdunhao@foxmail.com

回复 kedee@foxmail.com:
检查一下“prefix”有没有设置正确。
2019-06-12 11:52
wangdunhao@foxmail.com

wangdunhao@foxmail.com

检查一下“prefix”有没有设置正确。
2019-06-12 11:52
kedee@foxmail.com

kedee@foxmail.com

我设置了,也没有提示语法错误,就是不生效
2019-06-11 11:50