H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

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

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

回答:

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

clipboard.png
然后选择HTML

clipboard.png
然后解开最外层的注释,把自定义的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表示。

本文地址:H5W3 » vs code如何自定义代码段snippet?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址