开始
点击左下角的设置
img
点击"用户代码片段"->新建全局代码片段
img
创建自己的代码段
可以定义自己的代码段，全局代码段或特定语言的代码段。
要打开片段文件进行编辑，请选择“ 文件” > “首选项” （ 代码 > “ macOS上的首选项 ”）下的“ 用户代码段 ” ，然后选择要显示片段的语言（按语言标识符 ）或创建新的全局片段（ 新的全局片段文件 ） 。
片段以JSON格式定义。
片段下拉列表
语法
举例
img
prefix :这个参数是使用代码段的快捷入口，比如这里的log在使用时输入log会有智能感知。
吃码小妖：就是输入的关键字。
body:这个是代码段的主体。
需要设置的代码放在这里，字符串间换行的话使用\r\n换行符隔开。
注意如果值里包含特殊字符需要进行转义。
多行语句的以，隔开。
$1 :这个为光标的所在位置。
3，
5。。。。。
description :代码段描述，在使用智能感知时的描述。
img
结果
img
HTML5模板举例
"html5": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"\t<head>",
"\t\t<title>测试页</title>",
"\t\t<meta charset=\"UTF-8\">",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\t\t<link href=\"css/style.css\" rel=\"stylesheet\">",
"\t</head>",
"\t<body>",
"\t$2",
"\t</body>",
"</html>"
],
"description": "HTML - Defines a template for a html5 document",
},
\t代表空格。
“要用斜杠转义。
转义网址（+随机搜的）
代码片段设置评论
有一些新的代码段变量可以插入行或块注释，以描述当前语言。
使用BLOCK_COMMENT_START和BLOCK_COMMENT_END用于块注释等LINE_COMMENT。
下面的代码段插入/* Hello World */JavaScript文件和``HTML文件中
{
"hello": {
"scope": "javascript,html",
"prefix": "hello",
"body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
}
}
从插件市场添加片段
VS Code Marketplace上的许多扩展包括代码段。
如果您找到了要使用的设备，请安装它并重新启动VS Code并使用新的代码段。
代码片段文件名
文件类型和名称用于定义片段是全局的还是特定于语言的。
存储在以语言标识符 （ <languageId>.json ）命名的JSON文件中的代码段是特定于语言的。 例如，仅限JavaScript的代码段放在javascript.json文件中。
全局代码段
编辑时适用的全局代码段，并存储在<name>.code-snippets MyGlobal.code-snippets文件中，例如MyGlobal.code-snippets 。
全局代码段的JSON模式允许您定义scope属性，该属性可以过滤适用于该代码段的语言（基于语言标识符 ）。
下面的示例再次是For Loop ，但这次它的范围是JavaScript 和 TypeScript。
{
"For_Loop": {
"prefix": "for",
"scope": "javascript,typescript",
"body": [
"for (const ${2:element} of ${1:array}) {",
"\t$0",
"}"
],
"description": "For Loop"
}
}
添加新代码段后，您可以立即尝试，无需重新启动。
片段语法
代码段的body可以使用特殊构造来控制游标和插入的文本。
以下是支持的功能及其语法：
制表位
使用tabstops，您可以使编辑器光标在代码段内移动。 使用$1 ， $2指定游标位置。
数字是访问tabstops的顺序，而$0表示最终光标位置。
同一个tabstop的多次出现被链接并同步更新。
吃码小妖：就是tab按键。
占位符
占位符是带有值的tabstops，例如${1:foo} 。 将插入并选择占位符文本，以便可以轻松更改。 占位符可以嵌套，例如${1:another ${2:placeholder}} 。
吃码小妖：就是带有默认值的插糟。
选择
占位符可以作为值进行选择。 语法是逗号分隔的值枚举，用管道字符括起来，例如${1|one,two,three|} 。
插入代码段并选择占位符后，选项将提示用户选择其中一个值。
变量
使用$name或${name:default}，您可以插入变量的值。
未设置变量时，将插入其默认值或空字符串。
当变量未知（即，未定义其名称）时，将插入变量的名称并将其转换为占位符。
可以使用以下变量：
-
TM_SELECTED_TEXT当前选定的文本或空字符串 -
TM_CURRENT_LINE当前行的内容 -
TM_CURRENT_WORD光标下的单词或空字符串的内容 -
TM_LINE_INDEX基于零索引的行号 -
TM_LINE_NUMBER基于单索引的行号 -
TM_FILENAME当前文档的文件名 -
TM_FILENAME_BASE没有扩展名的当前文档的文件名 -
TM_DIRECTORY当前文档的目录 -
TM_FILEPATH当前文档的完整文件路径 -
CLIPBOARD剪贴板的内容
用于插入当前日期和时间：
-
CURRENT_YEAR当前年份 -
CURRENT_YEAR_SHORT当前年份的最后两位数字 -
CURRENT_MONTH两个数字的月份（例如'02'） -
CURRENT_MONTH_NAME月份的全名（例如“七月”） -
CURRENT_MONTH_NAME_SHORT月份的简称（例如'Jul'） -
CURRENT_DATE每月的某一天 -
CURRENT_DAY_NAME天的名称（例如'星期一'） -
CURRENT_DAY_NAME_SHORT当天的简称（例如'Mon'） -
CURRENT_HOUR24小时制格式的当前小时 -
CURRENT_MINUTE当前分钟 -
CURRENT_SECOND当前秒
变量变换
转换允许您在插入变量之前修改变量的值。 转型的定义包括三个部分：
- 与变量值匹配的正则表达式，或无法解析变量时的空字符串。
- “格式字符串”，允许从正则表达式引用匹配组。 格式字符串允许条件插入和简单修改。
- 传递给正则表达式的选项。
下面的示例插入当前文件的名称而不是其结尾，因此从foo.txt它会生成foo 。
${TM_FILENAME/(.*)\\..+$/$1/}
| | | |
| | | |-> no options
| | |
| | |-> references the contents of the first
| | capture group
| |
| |-> regex to capture everything before
| the final `.suffix`
|
|-> resolves to the filename
占位符，变换
与变量转换一样，占位符的转换允许在移动到下一个制表位时更改占位符的插入文本。
插入的文本与正则表达式匹配，匹配或匹配 - 取决于选项 - 将替换为指定的替换格式文本。 每次出现占位符都可以使用第一个占位符的值独立定义自己的转换。
Placeholder-Transforms的格式与Variable-Transforms的格式相同。
转换例子
这些示例显示在双引号内，因为它们会显示在代码段内，以说明需要双重转义某些字符。
示例转换以及文件名example-123.456-TEST.js的结果输出。
| 例 | 产量 | 说明 |
|---|---|---|
"${TM_FILENAME/[\\.]/_/}" |
example-123_456-TEST.js |
替换第一个. 用_
|
"${TM_FILENAME/[\\.-]/_/g}" |
example_123_456_TEST_js |
替换每个. 或-与_
|
"${TM_FILENAME/(.*)/${1:/upcase}/}" |
EXAMPLE-123.456-TEST.JS |
改为全部大写 |
"${TM_FILENAME/[^0-9^az]//gi}" |
example123456TESTjs |
删除非字母数字字符 |
语法
下面是片段的EBNF（ 扩展Backus-Naur形式 ）。 使用\ （反斜杠），您可以转义$ ， }和\ 。 在选择元素中，反斜杠也会转义逗号和管道字符。
any ::= tabstop | placeholder | choice | variable | text
tabstop ::= '$' int
| '${' int '}'
| '${' int transform '}'
placeholder ::= '${' int ':' any '}'
choice ::= '${' int '|' text (',' text)* '|}'
variable ::= '$' var | '${' var '}'
| '${' var ':' any '}'
| '${' var transform '}'
transform ::= '/' regex '/' (format | text)+ '/' options
format ::= '$' int | '${' int '}'
| '${' int ':' '/upcase' | '/downcase' | '/capitalize' '}'
| '${' int ':+' if '}'
| '${' int ':?' if ':' else '}'
| '${' int ':-' else '}' | '${' int ':' else '}'
regex ::= JavaScript Regular Expression value (ctor-string)
options ::= JavaScript Regular Expression option (ctor-options)
var ::= [_a-zA-Z] [_a-zA-Z0-9]*
int ::= [0-9]+
text ::= .*
将键绑定分配给片段
您可以创建自定义键绑定以插入特定代码段。
打开keybindings.json （ 首选项：打开键盘快捷键文件 ），它定义了所有的键绑定，并添加了一个键盘绑定，将"snippet"作为额外参数传递：
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log($1)$0"
}
}
键绑定将调用Insert Snippet命令，但不会提示您选择片段，而是会插入提供的片段。 您可以像往常一样使用键盘快捷键，命令ID和可选的when子句上下文定义自定义键绑定 ，以启用键盘快捷键。
此外，您可以使用langId和name参数引用现有代码段，而不是使用snippet参数值来定义内联代码段：
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "csharp",
"name": "myFavSnippet"
}
}
将自己的代码片段转为共享扩展
使用Preferences: Configure User Snippets命令创建和测试您的片段。
img
- 对代码段感到满意后，将整个JSON文件复制到扩展文件夹中，例如
snippets.json - 将以下代码段添加到您的
package.json
{
"contributes": {
"snippets": [
{
"language": "javascript",
"path": "./snippets.json"
}
]
}
}
您可以在以下位置找到完整的源代码：https://github.com/Microsoft/vscode-extension-samples/tree/master/snippet-sample
实例
snippets.json
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}
package.json
{
"name": "snippet-sample",
"displayName": "Snippet Sample",
"description": "Snippet Sample",
"version": "0.0.1",
"publisher": "vscode-samples",
"engines": {
"vscode": "^1.28.0"
},
"categories": [
"Snippets"
],
"contributes": {
"snippets": [
{
"language": "javascript",
"path": "./snippets.json"
}
]
}
}
网友评论