自定義代碼塊

1. 前言

前面小節我們了解了系統內置的一些常用代碼塊的用法，但這些系統預置的代碼塊并不能滿足我們所有開發的需求。

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

2. 配置項解析

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

2.1 key 配置項

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

前面講的條件編譯代碼塊 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"
}

可以看到，在這兩個代碼塊文件中，關于條件編譯的 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 配置項中，每一行都要用雙引號包圍，并用逗號分隔。代碼中出現雙引號使用"轉義，或者使用單引號代替?？s進需要用 \t 表示，不能直接輸入縮進或空格。

3.3 代碼塊生效

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

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

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

4. 小結

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

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