vs code如何自定义代码段snippet？

Question

比方说我输入css,tab后出现以下代码:

<style type="text/css">
    $0
</style>

其中$0是光标位置,sublime可以这样设置,不知道vscode是怎么设置的呢

Answer 1

下面以html的为例，首先按下快捷键Ctrl+Shift+P，选择打开用户代码段

然后选择HTML

然后解开最外层的注释，把自定义的snippet照葫芦画瓢多写几个。

{
// /*
    // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
    "Print to css": {
        "prefix": "css",
        "body": [
            "<style type=\"text/css\">"
            "\t$0",
            "</style>"
        ],
        "description": "Log output to css"
    },
    "Print to js": {
        "prefix": "js",
        "body": [
            "<script type=\"text/javascript\">",
            "\t$1",
            "</script>"
        ],
        "description": "Log output to js"
    },
    "Print to sc": {
        "prefix": "sc",
        "body": [
            "<script src=\"${1}\"></script>"
        ],
        "description": "Log output to sc"
    }
// */
}

需要注意两点，就是代码段里面如果包含双引号，请使用\"转义；另外tab键制表符需要用\t表示。