VSCode 利用 Snippets 设置代码块[附带网站推荐]

2023-11-26 23:40:46

VSCode 利用 Snippets 设置代码块

一、起步

1.如何设置

Windows系统: 文件 > 首选项 > 用户代码片段

Mac系统: Code > 首选项 > 用户片段

2. 选择已有代码片段或创建代码片段（可以对现有的进行修改，也可以新建代码片段）

代码片段分两种：

全局代码片段（每种语言环境下都能触发代码块）。
对应语言的局部代码片段（只能在对应语言环境下才能触发），新建全局代码片段会在 snippets 目录下生成 .code-snippets 为后缀的配置文件，而新建对应语言的代码片段会生成 对应语言 + .json 的配置文件。
点击新建全局代码片段，可以新建所有文件都可使用的代码块，输入拓展名可以打开已有的拓展名文件，或者创建新的代码块文件

下图是创建代码块的开始界面：

如：我们新建一个叫 my-snippets 的代码片段文件

新建完之后会出现默认的示例，看起来是个类似 json 的配置文件。

接下来我们可以在开心的在新建的 my-snippets.code-snippets 文件中设置我们的代码片段了。

二、Snippet 语法

// Example:
"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}
复制代码

Example 下面的 Print to console 对应代码片段名称（触发代码片段的时候会展示匹配到的代码片段名称）。
prefix 对应触发代码片段的字符。
body 对应代码片段内容，可以是字符串，也可以为数组，若为数组每个元素都做为单独的一行插入。
description 对应代码片段描述。

1.占位符 $

log 方法中 $ 后面紧跟数字可指定代码片段触发落入编辑器之后的光标位置，光标位置按照从小到大排序。 log 方法中当你输入 log + TAB 之后光标会默认落到 log() 的括号中（$1 的位置），如果此时没有手动移动光标位置，再次按 TAB 则光标会落到 console.log() 的第二行（ $2 的位置），当然，你也可以设置 $3、$4 … 等等。

需要注意的是：

$0 用于设置最终光标的位置，设置了 $0 之后，再往后设置其他占位符则不会生效， $0 终止了 TAB键 的光标跳转操作。

小技巧

我们可以在代码片段的最后加上$0的占位符，方便我们跳出当前代码段，快速开始新的代码编写

2.网站推荐

https://snippet-generator.app/
帮你生成代码块文件

码农公寓