VSCode插件开发指南之Snippets Syntax(1)

本文是VSCode插件开发系列的第一部分,重点介绍Snippets Syntax。Snippets是便捷的代码模板工具,VSCode遵循TextMate语法。文章详细解析了Tabstops、占位符、选择和变量等特性,以及如何使用变量变形和占位符变形等功能,帮助开发者更高效地创建和使用代码片段。
摘要由CSDN通过智能技术生成

指南1.基础

Code Sinpets是一种使得输入重复性代码的模板,比如循环和条件判断之类的。VSCode中的Sinppets遵循TextMate语法,除了不支持插值shell代码\u的使用
下面是一个简单的sinppets。
{
   
    "For-Loop":{
   
        "prefix":"for",
        "body":[
            "for ${2:element} of ${1:array} {",
            "\t$0",
            "}"
        ],
        "description":"For-Loop"
    }
}

上面的字段解释:

  • For-Loop:这是snippets的名称
  • prefix:定义了这个snippets如何被触发,在这个case中是for
  • body:内容是一个可以被插入的单字符串或者一个字符串数组
  • description:是snippets的描述
上面的例子中有两个空格:${1:array}${2:element}。我们可以按照数字的顺序很快地让过他们。数字之后的字符串和:(colon)可以被用作初始值。
下面就让我们学习一下Snippest Syntax的语法。

Snippets Syntax

sinppets的body部分可以使用特别的结构体来控制光标和插入的文件。下面的是支持的特性和他们的语法:

Tabstops

通过tabstops,你可以使编辑光标移动进一个sinppets。使用$1,$2来指定光标位置。数字是tabstops访问的顺序。而(whereas)$0表示的是光标最终的定位。发生在多行的相同tabstop会被同步关联和更新。

占位符(Placeholders)

占位符是带有值的tabstops,就像${1:foo}。占位符文本可以被插入和选中,这样的话可以很容易被修改。占位符可以嵌套使用,就像${1:another ${2:placeholder}}

选择(Choice)

占位符可以是有选择的值 , 语法是独立的枚举值 ,用|符号进行关闭 ,比如${1|one,two,three|}。当snippets被插入并且站位符被选中的时候,选择会弹出一共用户选择 。

变量

通过$name或者<
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VS Code 插件开发中,自动完成是一个非常常用的功能,可以大大提高开发效率。以下是实现自动完成的步骤: 1. 在 `package.json` 文件中添加以下代码: ``` "contributes": { "languages": [ { "id": "your_language_id", "aliases": [ "Your Language" ], "extensions": [ ".your_file_extension" ], "configuration": "./language-configuration.json" } ], "completions": [ { "language": "your_language_id", "path": "./snippets/your_completion.json" } ] } ``` 其中,`your_language_id` 为你的语言的 ID,`aliases` 为你的语言的别名,`extensions` 为你的语言的文件扩展名,`configuration` 为你的语言的配置文件路径,`completions` 中的 `language` 为你的语言的 ID,`path` 为你的自动完成文件路径。 2. 在 `language-configuration.json` 文件中添加以下代码: ``` { "comments": { "lineComment": "//", "blockComment": ["/*", "*/"] }, "brackets": [ ["{", "}"], ["[", "]"], ["(", ")"] ], "autoClosingPairs": [ {"open": "{", "close": "}"}, {"open": "[", "close": "]"}, {"open": "(", "close": ")"} ], "surroundingPairs": [ {"open": "{", "close": "}"}, {"open": "[", "close": "]"}, {"open": "(", "close": ")"} ] } ``` 其中,`comments` 为注释的配置,`brackets` 为括号的配置,`autoClosingPairs` 为自动关闭的括号对,`surroundingPairs` 为包围选中内容的括号对。 3. 在 `your_completion.json` 文件中添加你的自动完成代码,例如: ``` { "function": { "prefix": "fn", "body": [ "function ${1:name}(${2:params}) {", "\t${3:console.log('Hello, World!');}", "}" ], "description": "Create a function" } } ``` 其中,`prefix` 为前缀,`body` 为自动完成的代码,`description` 为描述。 4. 在你的插件代码中,使用 `vscode.languages.registerCompletionItemProvider()` 方法注册自动完成提供程序,例如: ``` vscode.languages.registerCompletionItemProvider("your_language_id", { provideCompletionItems(document, position, token, context) { // 返回你的自动完成项 } }) ``` 在 `provideCompletionItems()` 方法中,你需要返回你的自动完成项。你可以使用 `vscode.CompletionItem()` 类来创建自动完成项。 以上就是 VS Code 插件开发中实现自动完成的步骤。希望能帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值