VS code 创建代码片段

2019-10-25 本文已影响0人吃码小妖

开始

点击左下角的设置

img

点击"用户代码片段"->新建全局代码片段

img

创建自己的代码段

可以定义自己的代码段，全局代码段或特定语言的代码段。

要打开片段文件进行编辑，请选择“ 文件” > “首选项” （代码 > “ macOS上的首选项 ”）下的“ 用户代码段 ” ，然后选择要显示片段的语言（按语言标识符）或创建新的全局片段（新的全局片段文件）。

片段以JSON格式定义。

片段下拉列表

语法

举例

img

prefix :这个参数是使用代码段的快捷入口，比如这里的log在使用时输入log会有智能感知。

吃码小妖：就是输入的关键字。

body:这个是代码段的主体。

需要设置的代码放在这里，字符串间换行的话使用\r\n换行符隔开。

注意如果值里包含特殊字符需要进行转义。

多行语句的以，隔开。

$1 :这个为光标的所在位置。

$2 :使用这个参数后会光标的下一位置将会另起一行，按tab键可进行快速切换，还可以有$ 3， $4，$ 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代表空格。

“要用斜杠转义。

转义网址（+随机搜的）

http://www.bejson.com/

代码片段设置评论

有一些新的代码段变量可以插入行或块注释，以描述当前语言。

使用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_HOUR 24小时制格式的当前小时
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"
  }
}

将自己的代码片段转为共享扩展

地址：contributes.snippets

使用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"
            }
        ]
    }
}