DCloud_HB_WDL
DCloud_HB_WDL
  • 发布:2019-05-15 19:41
  • 更新:2 天前
  • 阅读:13263

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中会画出红波浪线,请注意修正。
3 关注 分享
wh521518@163.com 3307006763@qq.com ai666

要回复文章请先登录注册

PeterLiu

PeterLiu

代码块可以跟着项目走么
2 天前
万年老龙猫

万年老龙猫

target=\"${1:_blank/_parent/_self/_top}\",
多选项怎么注释值,我看程序自带的右注释,我们自定义的应该怎么弄?谢谢
2020-02-06 17:22
万年老龙猫

万年老龙猫

"base(默认目标)": {
"prefix": "base",
"body": [
"<base href=\"\" target=\"${1:_blank/_parent/_self/_top}\"> />"
],
"triggerAssist": false,
"description": "为页面上的所有链接规定默认地址或默认目标"
},


请问自定义代码快,下拉候选列表的值,怎么备注注释???
2020-02-06 17:19
812174597@qq.com

812174597@qq.com

在vue.json 里面copy 原本有的改了一个名字
"#ndf": {
"body": [
"<!-- #ifndef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/H5} -->",
"$0",
"<!-- #endif -->"
],
"prefix": "ndf",
"project": "uni-app",
"scope": "source.vue.html"
}
但是在home.vue 里面根本就没有为啥
2020-01-10 08:43
admin@zishapot.com

admin@zishapot.com

特别希望增加可视化"自定义代码块".
像phpstorm那样的功能.
经常敲的那些模块,自己定义成快捷输入.
目前有的太麻烦,还要转义字符串.
2020-01-07 16:53
艺灵设计

艺灵设计

回复 aoaobaba:
可能我没描述清楚。
1、我刚试了下,在对象中确实不支持自定义注释,不知道是不是少写了什么东西。
2、我要的是自定义注释,软件自带的注释中的信息不是我想要的。(因为我们把编辑器从vs code换到HBuilder X,团队要求代码加注释规范,手动添加也可以,就是费时了些)
2020-01-07 15:35
aoaobaba

aoaobaba

想对象里的函数添加注释代码块,快捷键没效果:
```
const userApi ={
// 这里 输入‘ann’ (我定义了注释代码块) 没有效果
function: ........
}
```
在js 文件内非代码块之外的空白处输入 ann 可以显示出来注释;这是不支持的嘛?类似java那种类方法上添加注释。
2020-01-07 14:37
aoaobaba

aoaobaba

回复 艺灵设计:
插入代码不支持计算,就是纯生成文字模板嘛
2020-01-07 14:28
艺灵设计

艺灵设计

我想仿vs code的注释插件,但是时间这个函数不知道怎么生效,
```
{
"method-annotation": {
"prefix": "anno",
"body": [
"/**",
" * 方法说明",
" * author: 佚名",
" * description: ",
" * @param $1",
" * @return $2",
" * Date new Date().getTime()",
" */"
],
"triggerAssist": false,
"description": "method annotation"
}
}
```
这样在js中输入anno后 插入的代码是
```
/**
* 方法说明
* author: 佚名
* description:
* @param
* @return
* Date new Date().getTime()
*/
```
这个new Date().getTime()并没有变成插入注释的时间,应该怎么改呢
2020-01-07 13:43
ShiningStone

ShiningStone

我的不能触发,详见:https://ask.dcloud.net.cn/question/83659
2019-11-25 18:47