vscode自定义代码片段（代码提示）

内容介绍

  针对一些复用率较高或符合用户习惯的代码进行自定义，输入关键字后自动提示并生成补全代码。
  如 console.log(“hello world”)，只输入“log”，自动生成补全代码，并将光标停在输入值的指定位置。

一、设置方法

• ctrl+shift+P 打开命令窗口，输入“snippet”，选择“首选项：配置用户代码片段”
• 点击左下方齿轮按钮，选择“用户代码片段”
• 菜单栏：文件——首选项——用户片段

二、配置流程

• 找到需要配置的文件类型，如javascript.json，分别对prefix,body和description的值进行修改，如：

    "Print to console": {
        "prefix": ["console.log", "console", "log"],
        "body": [
            "console.log($1);",
            "$2"
        ],
        "description": "Log output to console"
    },

• setting.json中配置：

// 使用tab进行补全
    "editor.tabCompletion": "on",
// 配置代码片段与其他代码提示的顺序
    "editor.snippetSuggestions": "top",

• 效果演示：
  

三、组成部分：

 1. prefix：前缀
	可以为字符串或数组，数组中的每一项关键字都作为代码片段的前缀。
 2. scope：作用域
	不选默认为全局代码片段，也可指定语言模式，适应不同语言的风格。
 3. body：主体
	模板的主体内容，每一个字符串代表一行。
 4. description：说明
	描述代码片段的功能作用，默认为对象名称。

四、语法结构：

 1.制表符（Tapstops）：
	指定光标位置，$0为光标最终位置，数值相同的可同步更新修改（参考Choice）。
 2.占位符（Placeholders）
	带有默认值的Tapstops，可嵌套，代码生成后默认值被选中，方便修改变量等。
 3.可选项（Choice）：
	提供多个选项的Placeholders，${1|a,b,c|}，输入关键字后光标位置显示内容可进行选择。
 4.变量（Variables）：
	需使用$，如 filename: '$TM_FILENAME'

五、变量参数：

1、文档类

参数	说明
TM_SELECTED_TEXT	当前选定的文本或空字符串；
TM_CURRENT_LINE	当前行的内容；
TM_CURRENT_WORD	光标所处单词或空字符串；
TM_LINE_INDEX	行号（从零开始）；
TM_LINE_NUMBER	行号（从一开始）；
TM_FILENAME	当前文档的文件名；
TM_FILENAME_BASE	当前文档的文件名（不含后缀名）；
TM_DIRECTORY	当前文档所在目录；
TM_FILEPATH	当前文档的完整文件路径；
WORKSPACE_NAME	当前工作目录的名称（而非完整路径）；
CLIPBOARD	当前剪贴板中内容。

2、时间类

参数	说明
CURRENT_YEAR	当前年份；
CURRENT_YEAR_SHORT	当前年份的后两位；
CURRENT_MONTH	格式化为两位数字的当前月份，如 02；
CURRENT_MONTH_NAME	当前月份的全称，如 July；
CURRENT_MONTH_NAME_SHORT	当前月份的简称，如 Jul；
CURRENT_DATE	当天月份第几天；
CURRENT_DAY_NAME	当天周几，如 Monday；
CURRENT_DAY_NAME_SHORT	当天周几的简称，如 Mon；
CURRENT_HOUR	当前小时（24 小时制）；
CURRENT_MINUTE	当前分钟；
CURRENT_SECOND	当前秒数；
CURRENT_SECONDS_UNIX	Unix 时间戳。

3、注释类

参数	说明
BLOCK_COMMENT_START	块注释上半段
BLOCK_COMMENT_END	块注释下半段
LINE_COMMENT	行注释

六、配置示例：

1、javascript.json

{
    // Place your snippets for javascript 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 test": {
        "prefix": ["test"],
        "body": [
            "$LINE_COMMENT-- test code snippet",
            "console.log(${1|a,b,c|});",
            "let test=$1"
        ],
        "description": "Log output to test"
    },
    "Print to console": {
        "prefix": ["console.log", "console", "log"],
        "body": [
            "console.log();",
            "$2"
        ],
        "description": "Log output to console"
    },
    "mock str array": {
        "prefix": ["arrstr"],
        "body": [
            "let ${1:arrstr}=[\"name\",\"age\",\"sex\",\"hobby\"];",
            "$2"
        ],
        "description": "mock a string array"
    },
    "mock num array": {
        "prefix": ["arrnum"],
        "body": [
            "let ${1:arrnum} = [1, 2, 3, 4, 5, 6];",
            "$2"
        ],
        "description": "mock a number array"
    },
    "mock object": {
        "prefix": ["obj"],
        "body": [
            "$LINE_COMMENT--snippets for obj(javascript)",
            "let ${1:obj} = {\n\tname: 'tom',\n\tage: 12,\n\tgender: 'man',\n\ttime: $CURRENT_SECONDS_UNIX,\n\tfilename: '$TM_FILENAME',\n\tfilepath: '$TM_FILEPATH',\n\thobby: 'football'\n};",
            "$2"
        ],
        "description": "mock a object"
    },
    "mock getUrlPara": {
        "prefix": ["getUrlPara"],
        "body": [
            "$LINE_COMMENT--获取url参数",
            "function getUrlPara(name) {",
            "var reg = new RegExp(\"(^|&)\" + name + \"=([^&]*)(&|$)\", \"i\");",
            "var r = window.location.search.substr(1).match(reg);",
            "if (r != null) return (r[2]);",
            "return null;",
            "}",
            "",
            "console.log(getUrlPara(\"id\"));",
            "$2"
        ],
        "description": "mock a getUrlPara"
    },
    "mock remarkline": {
        "prefix": ["remarkline", "jsline"],
        "body": [
            "$BLOCK_COMMENT_START-----------------------------------------------------$BLOCK_COMMENT_END",
            "$2"
        ],
        "description": "mock a remarkline"
    },
}

2、css.json

{
    // Place your snippets for css 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:
    "bgCover css": {
        "prefix": "bgCover",
        "body": [
            ".bgCover {",
            "\tbackground-position: center;",
            "\tbackground-repeat: no-repeat;",
            "\tbackground-size: 100% 100%;",
            "}",
        ],
        "description": "style for bgCover"
    },
    "inputbutton css": {
        "prefix": "inputbutton",
        "body": [
            "input[type='button'] {",
            "\toutline: none;",
            "\tborder: none;",
            "\ttext-shadow: none;",
            "\t-webkit-appearance: none;",
            "\t-webkit-user-select: none;",
            "\tuser-select: none;",
            "\tbox-shadow: none;",
            "}",
        ],
        "description": "style for inputbutton"
    },
    "flexBox css": {
        "prefix": "flexBox",
        "body": [
            ".flexBox {",
            "\tdisplay: flex;",
            "\tdisplay: -moz-flex;",
            "\tdisplay: -o-flex;",
            "\tdisplay: -webkit-flex;",
            "\tdisplay: -ms-flex;",
            "}",
        ],
        "description": "style for flexBox"
    },
}

3、html.json

{
    // 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:
    "html example": {
        "prefix": "html",
        "body": [
            "",
            "",
            "",
            "",
            "\t",
            "\t",
            "\t",
            "\t",
            "",
            "",
            "",
            "$0",
            "",
            "",
            "",
            ""
        ],
        "description": "html constructor"
    },

}

---

标签：vscode，工具类，代码片段，snippet

---

更多演示案例，查看 案例演示

---

欢迎评论留言!