目录
- 内容介绍
- 一、设置方法
- 二、配置流程
- 三、组成部分：
- 四、语法结构：
- 五、变量参数：
- 1、文档类
- 2、时间类
- 3、注释类
- 六、配置示例：
- 1、javascript.json
- 2、css.json
- 3、html.json
内容介绍
针对一些复用率较高或符合用户习惯的代码进行自定义，输入关键字后自动提示并生成补全代码。
如 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": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<title>html-file</title>",
"\t<script src=\"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js\"></script>",
"</head>",
"",
"<body>",
"$0",
"</body>",
"",
"</html>",
""
],
"description": "html constructor"
},
}标签：vscode，工具类，代码片段，snippet
更多演示案例，查看 案例演示
欢迎评论留言!
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
