自定義代碼塊

1. 前言

前面小節(jié)我們了解了系統(tǒng)內(nèi)置的一些常用代碼塊的用法，但這些系統(tǒng)預(yù)置的代碼塊并不能滿足我們所有開(kāi)發(fā)的需求。

不過(guò)不需要擔(dān)心，在 HBuilderX 開(kāi)發(fā)工具中，給我們提供了自定義代碼塊的功能。我們可以根據(jù)自己的開(kāi)發(fā)習(xí)慣和開(kāi)發(fā)需求，來(lái)自定義我們常用的一些代碼塊。本小節(jié)來(lái)講解如何自定義代碼塊。

2. 配置項(xiàng)解析

代碼塊配置項(xiàng)我們前面小節(jié)也提到過(guò)，有 “body”、“prefix”、“project” 等，大家都知道各配置項(xiàng)的含義了，這節(jié)課主要來(lái)講解自定義代碼塊時(shí)，設(shè)置這些配置項(xiàng)需要注意的一些地方。

2.1 key 配置項(xiàng)

“key” 配置項(xiàng)就是觸發(fā)代碼塊時(shí)，顯示在代碼列表的名字。前面小節(jié)說(shuō)過(guò) key 配置項(xiàng)是唯一的，這個(gè)唯一指的是在同一個(gè)文件中是唯一的，不同代碼塊文件可以是重復(fù)的，我們來(lái)舉個(gè)例子。

前面講的條件編譯代碼塊 ifdef，分別在 javascript代碼塊（javascript.json）、vue代碼塊（vue.json）中的樣子如下。

實(shí)例：

// javascript.json
"#ifdef": {
        "body": [
            "http:// #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",
            "http:// #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"
}

可以看到，在這兩個(gè)代碼塊文件中，關(guān)于條件編譯的 key 配置項(xiàng)都是 "#ifdef"，這樣雖然設(shè)置了兩個(gè)代碼塊，但是我們使用的時(shí)候就不需要在不同的作用域去區(qū)分了，非常方便。

2.2 body配置項(xiàng)

“body” 配置項(xiàng)在自定義的時(shí)候，需要學(xué)習(xí)的地方比較多，需要了解怎樣來(lái)設(shè)置占位符，下面我們來(lái)詳細(xì)講解一下，看看應(yīng)該如何設(shè)置 “body” 配置項(xiàng)。

在系統(tǒng)預(yù)置代碼塊源碼文件中，可以看到 “body” 配置項(xiàng)中有許多 $0、$1、$2 字符。這些字符是什么意思呢？

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

$ 是占位符，$ 后面緊跟的數(shù)字是代碼塊被觸發(fā)后，在開(kāi)發(fā)工具中顯示的光標(biāo)位置，光標(biāo)位置顯示順序根據(jù) $ 后面的數(shù)字有關(guān)。

從 KaTeX parse error: Expected 'EOF', got '開(kāi)' at position 3: 1 開(kāi)?始， 后面的數(shù)字越大，光標(biāo)顯示順序就越靠后。代碼塊被觸發(fā)后，光效會(huì)先顯示在 $1 所在的位置， $1 可以設(shè)置多個(gè)，光標(biāo)會(huì)同時(shí)出現(xiàn)在這多個(gè)位置。再次按 TAB 鍵，光標(biāo)會(huì)顯示在 $2 所在的位置， $3、$4 … 以此類推。

需要特別注意的是 $0 設(shè)置的是光標(biāo)最終所在的位置。比如我們將代碼塊的 body 配置項(xiàng)設(shè)置成下面這樣。

實(shí)例：

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

代碼塊被觸發(fā)之后，鼠標(biāo)會(huì)顯示在 $1 所在的位置，如下圖：

再次按 TAB 鍵，鼠標(biāo)顯示在 $2 所在的位置，如下圖：

再次按 TAB 鍵，沒(méi)有比 $2 更大的數(shù)字了，所以鼠標(biāo)會(huì)最終顯示在 $0 所在的位置，如下圖：

2.2.2 設(shè)置多選項(xiàng)下拉菜單

設(shè)置代碼塊內(nèi)容時(shí)，還支持設(shè)置多選項(xiàng)下拉菜單。如果某個(gè)位置需要有下拉候選菜單，我們可以這樣來(lái)寫(xiě)：${1:imooc1/imooc2/imooc3}。

我們自定義代碼塊的時(shí)候，將 body 的內(nèi)容設(shè)置為下面這樣，來(lái)看看是怎樣的效果。

實(shí)例：

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

代碼塊被觸發(fā)之后，會(huì)顯示出剛剛設(shè)置的多選項(xiàng)下拉菜單。

body 配置項(xiàng)需要我們學(xué)習(xí)的地方比較多，知道了這些配置項(xiàng)的用法之后，我們來(lái)學(xué)習(xí)如何自定義一個(gè)代碼塊吧。

3. 自定義代碼塊

3.1 打開(kāi)自定義文件

點(diǎn)擊菜單欄-工具-代碼塊設(shè)置，或出現(xiàn)這些選項(xiàng)，如下圖：

我們定義什么語(yǔ)言的代碼塊，就直接選擇相應(yīng)語(yǔ)言的代碼塊文件，除了 HTML、css、javascript、vue 語(yǔ)言之外，其他的都選擇最后一項(xiàng)“自定義其他語(yǔ)言代碼塊”。

在 uni-app 項(xiàng)目中，我們一般最常定義的代碼塊是 vue 代碼塊，所以這節(jié)課我們打開(kāi) vue 代碼塊文件，后面在這個(gè)文件中填充自定義代碼塊。

打開(kāi)代碼塊文件之后，頁(yè)面的左側(cè)是系統(tǒng)預(yù)置的代碼塊，我們不能修改，頁(yè)面的右側(cè)是編寫(xiě)自定義代碼塊的區(qū)域。

3.2 編寫(xiě)自定義代碼塊

將下面的代碼粘貼到代碼塊文件的右側(cè)區(qū)域。
實(shí)例：

"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：

• 要注意代碼塊的最外層有一對(duì)大括號(hào)，所有的代碼塊都要包裹在這個(gè)大括號(hào)中；
• 多個(gè)代碼塊之間要用英文逗號(hào)隔開(kāi)；
• body 配置項(xiàng)中，每一行都要用雙引號(hào)包圍，并用逗號(hào)分隔。代碼中出現(xiàn)雙引號(hào)使用"轉(zhuǎn)義，或者使用單引號(hào)代替。縮進(jìn)需要用 \t 表示，不能直接輸入縮進(jìn)或空格。

3.3 代碼塊生效

我們保存一下剛剛自定義的代碼塊，要先查看左下角有沒(méi)有報(bào)錯(cuò)信息。如果代碼塊語(yǔ)法不合法，編輯器左下角會(huì)彈出錯(cuò)誤信息，同時(shí)代碼中會(huì)在錯(cuò)誤的地方顯示紅波浪線，這時(shí)要注意修正，否則代碼塊不會(huì)生效。

代碼塊保存成功之后，自定義的代碼塊就會(huì)生效了，這個(gè)時(shí)候可以在文檔中使用了，我們來(lái)測(cè)試一下。

在文檔中輸入 uimooc ，代碼塊就會(huì)被觸發(fā)，如下圖：

4. 小結(jié)

本小節(jié)我們學(xué)習(xí)了怎樣自定義一個(gè)代碼塊，同樣屬于實(shí)操性比較強(qiáng)的知識(shí)點(diǎn)，大家在學(xué)習(xí)的過(guò)程中，最好跟著我們的課程操作一遍，加深一下理解哦，本小節(jié)需要掌握的重點(diǎn)如下：

• 了解代碼塊中各配置項(xiàng)的含義，特別是 body 配置項(xiàng)，要掌握 $ 占位符的使用；
• 掌握如何自定義代碼塊并在文檔中生效。