Snippets

Overview

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

For example, we often use if...else conditional-statement. HBuilderX can create the corresponding code pattern by enter ife.

Enter ife

Generate if..else structure after carriage return.

List of snippets

JavaScript Snippets

• iff: if else snippet
• forr ：for loop snippet
• fori ：for loop snippet with variable i
• funn: function
• funa: anonymous function
• clog: print log
• clogvar: print variable name and value

Dom Snippets

• dg ：document.getElementById
• dl ：$("")

Vue Snippets

Enter v, HBuilderX will display list of vue snippets.

uni-app Snippets

Enter u, HBuilderX will display list of uni-app snippets. From HBuilderX 1.9.10+, you can use snippets ifios and ifandroid to check whether it belongs to the iOS and android platforms.

Snippets settings

HBuilderX has built-in a large number of snippets. Knowing how to use snippets can improve programming efficiency.

To view the built-in snippets, click [Menu-Tools-Snippets Settings], and select the snippets of the language you want to view.

In the opened page, the left side is the preset snippets, and the right side is the place where developers can extend the snippets by themselves.

Custom Snippets

Custom snippets are in the configuration json file. The following is configuration of ife snippet.

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

备注：HBuilderX 3.7.1+，支持代码块包围功能。更多

Snippets format description

HBuilderX uses json to define the snippet format, which is compatible with vscode's snippets, that is, the custom snippet configured in vscode can be copied to HBuilderX for use.

Body description:

• $1 The position of the cursor after the snippet is entered. If you need multiple cursors, add $1 in related locations; if there are preset data at this location and need to be selected, the grammar is ${1:selectedtext}; display drop-down menus with ${1:foo1/foo2/foo3}
• $2 With tabstops, you can make the editor cursor move inside a snippet.
• $0 The final cursor position via tabstop visited.

Remark：

1. Double quotes are escaped with \"
2. Multiple Lines are represented by multiple arrays, one array per line, wrapped by double quotes and separated by commas
3. The indentation is indicated by \t, you cannot enter the indentation or spaces!

Attention

1. Each snippet uses key as the primary key, and multiple snippets are separated by commas.
2. You will receive a warning message if the json format is wrong.

自定义项目代码块

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

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

Datetime variable

Supported from HBuilderX 2.7.5+, it supports to add "DATE_TIME" variable in annotation snippet.

Click the menu [Tools - Snippets settings - javascript snippets], and enter the following:

{
    "method-annotation": {
        "prefix": "anno",
        "body": [
            "/**",
            " * Method description",
            " * author: author name",
            " * description: ",
            " * @param $1",
            " * @return $2",
            " * @createTime: $DATE_TIME",
            " */"
        ],
        "triggerAssist": false,
        "description": "method annotation"
    }
}Copy to clipboardErrorCopied

自定义包围代码块

HBuilderX 3.7.1-alpha，新增自定义包围代码块功能。

目前HBuilderX，内置了js和ts的部分包围代码块，如需更多包围代码块，需要自定义进行配置。

如下Gif，在编辑器选中要操作的代码，按下Ctrl + Alt + T(MacOSX快捷键：Command + Alt + T)，则会打开代码块包围功能。

当然，您也可以点击HBuilderX顶部菜单【编辑 - 包围 - 代码块包围】

如何自定义包围代码块？

如下示例，$SELECTION 表示选中的区域。

其它配置项，参考

{
    "div_bao": {
        "body": [
            "<div>$SELECTION</div>"
        ],
        "prefix": "div_bao",
        "scope": "text.html.basic"
    }
}Copy to clipboardErrorCopied