Visual Studio代码中的代码片段

代码段是模板，可让您更轻松地输入重复的代码模式，例如循环或条件语句。

代码段分为二种：１、商店下的插件２、自定义的代码段

在Visual Studio Code中，代码片段出现在IntelliSense（Ctrl + Space）中，并与其他建议混合在一起，也出现在专用的代码片段选择器中（在“命令面板”中插入“代码片段”）。还支持制表符完成：使用启用制表符"editor.tabCompletion": "on"，键入一个代码段前缀（触发文本），然后按Tab键插入一个代码段。

片段语法遵循TextMate片段语法，但“插补外壳代码”和的使用除外\u；两者都不支持。

内置片段＃

VS Code具有用于多种语言的内置代码段，例如：JavaScript，TypeScript，Markdown和PHP。

内置的javascript代码段

您可以通过在命令面板中运行“插入代码段”命令来查看语言的可用代码段，以获取当前文件语言的代码段列表。但是，请记住，此列表还包括您已定义的用户代码段，以及已安装的扩展程序提供的所有代码段。

从Marketplace安装片段＃

VS Code Marketplace上的许多扩展都包含代码片段。您可以使用过滤器在“扩展名”视图（Ctrl + Shift + X）中搜索包含摘要的扩展名@category:"snippets"。

搜索带有摘要的扩展

如果找到要使用的扩展，请安装它，然后重新启动VS Code，新的代码片段将可用。

创建自己的代码段＃

一、安装插件 Snippets

二、设置

1、按F1或者在“文件” > “首选项”下选择“用户代码段”（在macOS上为“代码” > “首选项”）

2、选择对应语言

3、如果需要，则选择“新建全局代码段”文件选项。出现所有语言。VS Code为您管理基础代码段文件的创建和刷新。

片段下拉列表

代码段文件以JSON格式编写，支持C样式的注释，并且可以定义不限数量的代码段。片段支持大多数TextMate语法来实现动态行为，并基于插入上下文智能地格式化空格，并允许轻松地进行多行编辑。

以下是forJavaScript循环代码段的示例：

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

在上面的示例中：

“ For Loop”是代码段名称。如果未description提供，则通过IntelliSense显示。
prefix定义一个或多个在IntelliSense中显示摘要的触发词。子字符串匹配是在前缀上执行的，因此，在这种情况下，“ fc”可以匹配“ for-const”。
body是一或多个内容行，插入时将作为多行加入。换行符和嵌入的选项卡将根据插入代码段的上下文进行格式化。
description 是IntelliSense显示的代码段的可选描述。

另外，所述body的例子中的上述具有三个占位符（在遍历顺序列出）：，${1:array}，${2:element}和$0。您可以使用Tab快速跳到下一个占位符，此时您可以编辑占位符或再次跳到下一个占位符。结肠（如果有的话）之后的字符串是默认的文本，例如element在${2:element}。占位符遍历顺序从数字开始递增，从1开始；零是一种可选的特殊情况，它总是排在最后，并在光标位于指定位置的情况下退出摘要模式。

片段范围＃

代码段的范围有限，因此仅建议相关代码段。片段的范围可以是：

摘要所涉及的语言（可能是所有语言）
摘要所涉及的项目（可能是全部）

语言片段范围＃

根据是否在以下代码中定义，每个代码段的范围都限于一种，几种或所有（“全局”）语言：

一个语言片断文件
一个全球性片段文件

用户定义的单语言代码段是在特定语言的代码段文件中定义的（例如javascript.json），您可以通过“首选项：配置用户代码段”中的语言标识符来访问该文件。摘录仅在编辑其定义的语言时才可访问。

多语言和全局用户定义的代码段均在“全局”代码段文件（带有文件后缀的JSON .code-snippets）中定义，也可以通过“首选项：配置用户代码段”进行访问。在全局代码段文件中，代码段定义可能具有一个scope采用一个或多个语言标识符的附加属性，这使该代码段仅可用于那些指定的语言。如果未提供任何scope属性，则全局代码段适用于所有语言。

大多数用户定义的代码段的范围仅限于一种语言，因此是在特定于语言的代码段文件中定义的。

项目片断范围＃

您还可以将全局片段文件（带有文件后缀的JSON .code-snippets）限定到您的项目。项目文件夹摘要是使用“'...“首选项：配置用户代码段”下拉菜单中的“选项”选项，该选项位于.vscode文件夹中项目的根目录下。项目摘要文件可用于与该项目中的所有用户共享摘要。项目文件夹片段类似于全局片段，并且可以通过该scope属性将作用域限定为特定语言。

片段语法＃

该body片段可以使用特殊的结构来控制插入光标和文字。以下是受支持的功能及其语法：

制表位＃

使用制表符，可以使编辑器光标在摘要内移动。使用$1，$2指定游标的位置，。该数字是将按$0Tab键访问的顺序，而表示最终光标的位置。多次出现相同的制表位被链接并同步更新。

占位符＃

占位符是带有值的制表符，例如${1:foo}。占位符文本将被插入和选择，以便可以轻松更改。占位符可以嵌套，例如${1:another ${2:placeholder}}。

选择号

占位符可以选择作为值。语法是用逗号分隔的值枚举，例如，用竖线字符括起来${1|one,two,three|}。插入代码段并选择占位符后，选项将提示用户选择其中一个值。

变量＃

使用$name或${name:default}，您可以插入变量的值。未设置变量时，将插入其默认值或空字符串。当变量未知（即未定义其名称）时，将插入该变量的名称，并将其转换为占位符。

4、前端案例

{
    "doc for html5": {
        "prefix": "html5",
        "body": [
            "<!DOCTYPE html>",
            "<html>",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">",
    "    <title>${1:标题}</title>",
            "</head>",
            "<body>",
            "    ${2}",
            "</body>",
            "</html>"
        ],
        "description": "快速生成HTML5"
    }
}

posted @ 2021-04-06 22:28 Nature161 阅读(379) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Nature161