生成工具：https://snippet-generator.app/

VSCode snippets：https://code.visualstudio.com/docs/editor/userdefinedsnippets#/

VS Code 中的 Snippets 是一种快捷方式，可以帮助你更快地编写代码。你可以创建自己的 Snippets，也可以使用其他人创建的 Snippets。在 VS Code 中，你可以通过打开 “文件” 菜单，然后选择 “首选项” -> “用户代码片段” 来创建和编辑 Snippets。你可以选择某种语言，然后在其中添加自己的 Snippets。当你在编辑器中输入某个触发器时，VS Code 会自动提示你可用的 Snippets，你可以选择其中一个来快速生成代码。Snippets 可以大大提高编写代码的效率，特别是当你需要频繁使用某些代码片段时。

示例：

{// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected.// Example:"Print to console": {// "prefix": "log","prefix": ["console","log"],"body": ["console.log('$1');","$2"],"description": "Log output to console"}
}

这段代码是一个用于创建 “Print to console”（打印到控制台）的代码片段。它是一个在 VS Code 中创建自定义 Snippets 的示例。

• “prefix”（前缀）是在编辑器中触发代码片段的关键词。在这个示例中，当你在编辑器中输入 “log"或"console” 并按下 Tab 键时，代码片段将被插入。
• “body”（代码体）是实际的代码片段内容。在这个示例中，代码片段包含两行代码。第一行是 console.log('$1');，它将在控制台打印一个值，并使用 $1 表示占位符，你可以在插入代码后编辑这个占位符的内容。第二行是 $2，它表示另一个可编辑的占位符。
• “description”（描述）是对代码片段的简短描述，用于帮助你理解这个代码片段的作用。

因此，当你使用这个代码片段时，它会自动插入一行 console.log(''); 代码，并将光标定位在引号内，以便你输入要打印到控制台的值。你还可以使用 Tab 键切换到第二个占位符进行编辑。这个代码片段可以帮助你更快地在 JavaScript 文件中添加打印语句并输出到控制台。