使用代碼塊直接創(chuàng)建組件模板

1. 前言

HBuilderX 是 Dcloud 團(tuán)隊推出的一款功能非常強(qiáng)大的 Web開發(fā)工具，里面包含了許多代碼助手，可以幫助我們快速的完成項目開發(fā)。

其中我們最常用到的是代碼塊，本來需要敲打一大段代碼，使用代碼塊功能的話，我們只需要簡單敲寫幾個字母，再選擇代碼塊回車就可以了。

比如我們前面小節(jié)講的條件編譯，在 <template> 標(biāo)簽中是下面這樣的。
實例：

<!-- #ifdef H5 -->
<!-- #endif -->

在 <script> 標(biāo)簽中是下面這樣的。
實例：

// #ifdef H5
// #endif

每次寫條件編譯都要加上這樣一串代碼，并且還要注意在不同標(biāo)簽下使用不用的注釋符號，而我們使用代碼塊的話，直接輸入 ifdef，選擇 #ifdef 選項回車，如下圖：

再選擇相應(yīng)的平臺回車就可以了，如下圖：

HBuilderX 開發(fā)工具會根據(jù)不同的標(biāo)簽環(huán)境，生成相應(yīng)的條件編譯代碼，是不是非常方便。

除了 ifdef 之外，還有許多其他的常用的代碼塊，了解掌握之后，可以減輕我們開發(fā)過程中這些沒太有必要的重復(fù)工作，有效提高開發(fā)效率。下面我們來看看如何使用系統(tǒng)幫我們預(yù)置的一些常用代碼塊。

2. 如何使用系統(tǒng)預(yù)置的代碼塊

HBuilderX已經(jīng)默認(rèn)幫我們內(nèi)置了許多常用的代碼塊，我們點(diǎn)擊菜單欄-工具-代碼塊設(shè)置，就可以查看不同語言的代碼塊了。

比如我們選擇 HTML 代碼塊，就會出現(xiàn)當(dāng)前 <template> 標(biāo)簽中的代碼塊，如下圖：

打開的界面中，在頁面左側(cè)就可以看到系統(tǒng)幫我們預(yù)置的代碼塊源碼了，這些系統(tǒng)預(yù)置的代碼塊我們是不可以修改的。那我們?nèi)绾瓮ㄟ^這些代碼塊源碼來正確的使用代碼塊呢？我們還是拿條件編譯來舉例。

2.1 找到代碼塊源碼

點(diǎn)擊菜單欄-工具-代碼塊設(shè)置-vue代碼塊，可以看到下面這兩段關(guān)于條件編譯的代碼塊源碼。
實例：

"#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"
    },
    "#ifndef": {
        "body": [
            "<!-- #ifndef ${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": "ifndef",
        "project": "uni-app",
        "scope": "source.vue.html"
    },

2.2 代碼塊源碼解析
我能上面貼出的代碼塊，包括兩個條件編譯的代碼塊，分別是 ifdef、ifndef。

每個代碼塊都幾個配置項，這兩個代碼塊包含的配置項分別是 “body”、“prefix”、“project”、“scope”，當(dāng)然還有一些其他的配置項，下面我們來通過這些配置項了解一下代碼塊源碼。

2.2.1 key 配置項

上面代碼中的"#ifdef"、"#ifndef"`就是 “key” 配置項。這個配置項必須是唯一的。

到時候在頁面文件中輸入代碼塊觸發(fā)字符時，出現(xiàn)在代碼助手列表中的名字就是 “key” 配置項。

2.2.2 prefix 配置項

上面代碼中的"ifdef"、"ifndef"就是 “prefix” 配置項。這個配置項是代碼塊的觸發(fā)字符。比如，我們在頁面文件中敲寫 ifdef，就會觸發(fā)條件編譯的代碼塊。

2.2.3 body配置項

“body” 配置項里面包含的就是代碼塊的內(nèi)容了，也就是敲打代碼塊觸發(fā)字符后，會自動生成的內(nèi)容。這個內(nèi)容有幾個比較特殊的格式，我們后面小節(jié)講自定義代碼塊時會詳細(xì)講到。

2.2.4 triggerAssist 配置項

“triggerAssist” 配置項默認(rèn)為 false，可以不設(shè)置，當(dāng)設(shè)置為 true 時，表示該代碼塊輸入到文檔后立即在第一個tabstop上觸發(fā)代碼提示，拉出代碼助手。

2.2.5 project 配置項

“project” 配置項用來配置代碼塊在什么項目類型下生效?？扇≈涤校簎ni-app、Web、App、Wap2App。如果不設(shè)置，說明該代碼塊在所有的項目類型下都生效。

比如我們設(shè)置 "project": "uni-app"，說明該代碼塊只在 uni-app 項目下生效。

如果我們設(shè)置"project": “uni-app,Web”，說明該代碼快在uni-app 和 Web 項目下面生效，兩個項目類型之間用英文逗號（,）隔開

2.2.6 scope 配置項

“scope ” 配置項是用來規(guī)定代碼塊的作用域的，比如 "scope": "source.vue.html" 表示代碼塊作用于 .vue 文件中。

2.2.7 description 配置項

這個配置項是用來描述代碼塊的，便于我們了解代碼塊的作用。

2.3 代碼塊的使用

我們現(xiàn)在已經(jīng)找到了代碼塊源碼，并且指導(dǎo)了代碼塊各配置屬性的含義，現(xiàn)在來根據(jù)這些源碼來應(yīng)用這些代碼塊吧~

2.3.1 觸發(fā)代碼塊

系統(tǒng)幫我們預(yù)設(shè)的代碼塊文件有4個，點(diǎn)擊菜單欄-工具-代碼塊設(shè)置就可以看到，分別是 HTML代碼塊（html.json）、css代碼塊（css.json）、javascript代碼塊（javascript.json）、vue代碼塊（vue.json）。

我們使用代碼塊的時候，在頁面文件中輸入代碼塊的 ”prefix” 配置項，就會觸發(fā)這個代碼塊。

比如我們想要輸入 <text></text> 標(biāo)簽，只需要輸入 text 再回車就可以了。

text 代碼塊在vue.json 文件中可以找到，觸發(fā)字符是 utext，我們輸入 text 也可以觸發(fā)。

還有兩個比較快速的方法：

• 輸入 v，就會出現(xiàn) vue代碼塊列表；
• 輸入 u，就會出現(xiàn) uni-app 代碼塊列表。

2.3.2 注意事項

如果輸入代碼塊觸發(fā)代碼，沒有觸發(fā)代碼塊，可以注意一下面的問題。

• 直接粘貼觸發(fā)代碼，不會觸發(fā)代碼塊，可以粘貼后刪掉最后一個字符，再重新輸入，就會成功觸發(fā)代碼塊；

• 在中文模式下輸入觸發(fā)代碼，回車之后，不會觸發(fā)代碼塊，需要在英文模式下輸入；

• 對應(yīng)的作用域不對，每個代碼塊都有對應(yīng)的作用域，比如 css.json 文件中的代碼塊不會在 <template> 標(biāo)簽中觸發(fā)。

3. 小結(jié)

本小節(jié)主要給大家介紹了如何查看代碼塊源碼，以及如何使用代碼塊，我們開發(fā)過程中不需要特地記住這些代碼塊，只需要有個大體的印象，大體了解哪些代碼可以用代碼塊來快捷生成。

前期開發(fā)可以打開代碼塊源碼文件輔助開發(fā)，后期開發(fā)熟練了，自然就行云流水了。