自定義代碼塊

1. 前言

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

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

2. 配置項解析

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

2.1 key 配置項

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

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

實例：

// 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"
}

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

2.2 body配置項

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

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

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

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

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

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

實例：

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

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

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

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

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

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

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

實例：

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

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

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

3. 自定義代碼塊

3.1 打開自定義文件

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

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

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

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

3.2 編寫自定義代碼塊

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

"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 配置項中，每一行都要用雙引號包圍，并用逗號分隔。代碼中出現(xiàn)雙引號使用"轉(zhuǎn)義，或者使用單引號代替?？s進需要用 \t 表示，不能直接輸入縮進或空格。

3.3 代碼塊生效

我們保存一下剛剛自定義的代碼塊，要先查看左下角有沒有報錯信息。如果代碼塊語法不合法，編輯器左下角會彈出錯誤信息，同時代碼中會在錯誤的地方顯示紅波浪線，這時要注意修正，否則代碼塊不會生效。

代碼塊保存成功之后，自定義的代碼塊就會生效了，這個時候可以在文檔中使用了，我們來測試一下。

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

4. 小結(jié)

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

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