自定义代码块

1. 前言

前面小节我们了解了系统内置的一些常用代码块的用法,但这些系统预置的代码块并不能满足我们所有开发的需求。

不过不需要担心,在 HBuilderX 开发工具中,给我们提供了自定义代码块的功能。我们可以根据自己的开发习惯和开发需求,来自定义我们常用的一些代码块。本小节来讲解如何自定义代码块。

2. 配置项解析

代码块配置项我们前面小节也提到过,有 “body”、“prefix”、“project” 等,大家都知道各配置项的含义了,这节课主要来讲解自定义代码块时,设置这些配置项需要注意的一些地方。

2.1 key 配置项

“key” 配置项就是触发代码块时,显示在代码列表的名字。前面小节说过 key 配置项是唯一的,这个唯一指的是在同一个文件中是唯一的,不同代码块文件可以是重复的,我们来举个例子。

前面讲的条件编译代码块 ifdef,分别在 javascript代码块(javascript.json)、vue代码块(vue.json)中的样子如下。

实例:

// javascript.json
"#ifdef": {
        "body": [
            "// #ifdef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW}",
            "$0",
            "// #endif"
        ],
        "prefix": "ifdef",
        "project": "uni-app",
        "scope": "source.js"
}

// vue.json
"#ifdef": {
        "body": [
            "<!-- #ifdef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} -->",
            "$0",
            "<!-- #endif -->"
        ],
        "prefix": "ifdef",
        "project": "uni-app",
        "scope": "source.vue.html"
}

可以看到,在这两个代码块文件中,关于条件编译的 key 配置项都是 "#ifdef",这样虽然设置了两个代码块,但是我们使用的时候就不需要在不同的作用域去区分了,非常方便。

2.2 body配置项

“body” 配置项在自定义的时候,需要学习的地方比较多,需要了解怎样来设置占位符,下面我们来详细讲解一下,看看应该如何设置 “body” 配置项。

在系统预置代码块源码文件中,可以看到 “body” 配置项中有许多 $0、$1、$2 字符。这些字符是什么意思呢?

2.2.1 $0、$1、$2 字符的含义

$ 是占位符,$ 后面紧跟的数字是代码块被触发后,在开发工具中显示的光标位置,光标位置显示顺序根据 $ 后面的数字有关。

KaTeX parse error: Expected 'EOF', got '开' at position 3: 1 开̲始, 后面的数字越大,光标显示顺序就越靠后。代码块被触发后,光效会先显示在 $1 所在的位置, $1 可以设置多个,光标会同时出现在这多个位置。再次按 TAB 键,光标会显示在 $2 所在的位置, $3、$4 … 以此类推。

需要特别注意的是 $0 设置的是光标最终所在的位置。比如我们将代码块的 body 配置项设置成下面这样。

实例:

"body": [
	"<${1:view} ${2:class}=\"imooc\">",
		"$0",
	"<${1:/view}>"
]

代码块被触发之后,鼠标会显示在 $1 所在的位置,如下图:

再次按 TAB 键,鼠标显示在 $2 所在的位置,如下图:

再次按 TAB 键,没有比 $2 更大的数字了,所以鼠标会最终显示在 $0 所在的位置,如下图:

2.2.2 设置多选项下拉菜单

设置代码块内容时,还支持设置多选项下拉菜单。如果某个位置需要有下拉候选菜单,我们可以这样来写:${1:imooc1/imooc2/imooc3}

我们自定义代码块的时候,将 body 的内容设置为下面这样,来看看是怎样的效果。

实例:

"body": [
	"<view class=${1:imooc1/imooc2/imooc3}>",
		"$0",
	"</view>"
]

代码块被触发之后,会显示出刚刚设置的多选项下拉菜单。

body 配置项需要我们学习的地方比较多,知道了这些配置项的用法之后,我们来学习如何自定义一个代码块吧。

3. 自定义代码块

3.1 打开自定义文件

点击菜单栏-工具-代码块设置,或出现这些选项,如下图:

我们定义什么语言的代码块,就直接选择相应语言的代码块文件,除了 HTML、css、javascript、vue 语言之外,其他的都选择最后一项“自定义其他语言代码块”。

在 uni-app 项目中,我们一般最常定义的代码块是 vue 代码块,所以这节课我们打开 vue 代码块文件,后面在这个文件中填充自定义代码块。

打开代码块文件之后,页面的左侧是系统预置的代码块,我们不能修改,页面的右侧是编写自定义代码块的区域。

3.2 编写自定义代码块

将下面的代码粘贴到代码块文件的右侧区域。
实例:

"uImooc": {
	"body": [
		"<view class=${1:imooc1/imooc2/imooc3}>",
		"\t<view class=\"imooc4\">",
		"\t$0",
		"\t</view>",
		"</view>"
	],
	"prefix": "uimooc",
	"project": "uni-app",
	"scope": "source.vue.html"
}

Tips:

  • 要注意代码块的最外层有一对大括号,所有的代码块都要包裹在这个大括号中;
  • 多个代码块之间要用英文逗号隔开;
  • body 配置项中,每一行都要用双引号包围,并用逗号分隔。代码中出现双引号使用"转义,或者使用单引号代替。缩进需要用 \t 表示,不能直接输入缩进或空格。

3.3 代码块生效

我们保存一下刚刚自定义的代码块,要先查看左下角有没有报错信息。如果代码块语法不合法,编辑器左下角会弹出错误信息,同时代码中会在错误的地方显示红波浪线,这时要注意修正,否则代码块不会生效。

代码块保存成功之后,自定义的代码块就会生效了,这个时候可以在文档中使用了,我们来测试一下。

在文档中输入 uimooc ,代码块就会被触发,如下图:

4. 小结

本小节我们学习了怎样自定义一个代码块,同样属于实操性比较强的知识点,大家在学习的过程中,最好跟着我们的课程操作一遍,加深一下理解哦,本小节需要掌握的重点如下:

  • 了解代码块中各配置项的含义,特别是 body 配置项,要掌握 $ 占位符的使用;
  • 掌握如何自定义代码块并在文档中生效。