代碼塊

概述

代碼塊是快速開發的利器。簡單的敲幾個字母，回車，就能生成大段代碼。

比如我們經常會敲if…else結構，在HBuilderX中，只需敲ife回車，就能直接生成相應的代碼結構。

敲ife

回車後生成if結構體

常用代碼塊列表

通用js代碼塊

• iff ：簡單if
• forr ：for循環結構體
• fori ：for循環結構體幷包含i
• funn：函數
• funa：匿名函數
• clog：打印日誌
• clogvar：打印變量命名和值

dom代碼塊

• dg ：document.getElementById
• dl ：$(“”)

vue代碼塊

敲v，即可拉出各種vue代碼塊

uni-app代碼塊

敲u，即可拉出各種uni-app代碼塊 還有ifios、ifandroid，這2個平臺判斷代碼塊（HBuilderX 1.9.10+）

代碼塊設置

HBuilderX已經內置了大量常用的代碼塊，熟悉這些代碼塊，對於提高編程效率有重要幫助。

查看內建的代碼塊，點擊菜單-工具-代碼塊設置，選擇你要查看的語言的代碼塊。

打開的界面中，左側即是預置的代碼塊，右側是開發者可以自己擴展代碼塊的地方。

自定義代碼塊

自定義代碼塊都是配置json文件中的，直接來一個js例子吧，上述ife代碼塊的配置如下：

{
"if ... else": {
    "body": [
        "if ($1) {",
        "\t$0",
        "} else{",
        "\t",
        "}"
    ],
    "prefix": "ife",
    "scope": "source.js"
}
}

代碼塊配置格式說明

HBuilderX使用json定義代碼塊的格式，兼容vscode的代碼塊格式，也就是你可以把vscode裏已經配置的自定義代碼塊方便的挪到HBuilderX中使用。

配置項body詳細說明:

• $1 表示代碼塊輸入後光標的所在位置。如需要多光標，就在多個地方配置$1；如該位置有預置數據且需要選中，則寫法是${1:selectedtext}；這裏還支持下拉候選菜單，多選項即下拉候選列表使用${1:foo1/foo2/foo3}
• $2 表示代碼塊輸入後再次按tab後光標的切換位置tabstops（代碼塊展開後按tab可以跳到下一個tabstop，在HBuilderX中看到類似綠色光標的不閃的豎線，就可以按tab或回車跳轉光標過去）
• $0代表代碼塊輸入後最終光標的所在位置（也可以按回車直接跳過去）。

特別說明：

1. 雙引號使用\"轉義
2. 換行使用多個數組表示，每個行一個數組，用雙引號包圍，並用逗號分隔
3. 縮進需要用\t表示，不能直接輸入縮進或空格！

注意事項

1. 每個代碼塊以key爲主鍵，多個代碼塊需要逗號分隔。
2. 如果json語法不合法，編輯器狀態欄會彈出錯誤信息，json中會畫出紅波浪線，請注意修正。

自定义项目代码块@projectSnippets

HBuilderX 3.4.8+版本起，支持自定义项目代码块。

HBuilderX，顶部菜单【工具 代码块设置 自定义项目代码块】。创建的代码块文件，会出现在项目根目录下的.hbuilderx目录下。

註釋模板同步時間

HBuilderX 2.7.5+版本起，支持註釋模板同步時間

點擊菜單【工具】【代碼塊設置】【javascript代碼塊】，輸入如下內容：

{
    "method-annotation": {
        "prefix": "anno",
        "body": [
            "/**",
            " * 方法說明",
            " * author: 佚名",
            " * description: ",
            " * @param $1",
            " * @return $2",
            " * @createTime: $DATE_TIME",
            " */"
        ],
        "triggerAssist": false,
        "description": "method annotation"
    }
}