How to add custom code snippets in VSCode?

在Visual Studio Code（VS Code）中添加自定义代码段是一种提高代码编写效率的好方法。这里是一步一步的指导如何在VS Code中添加自定义代码段：

步骤1：打开代码片段文件

1. 在VS Code中，打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P 在 macOS 上）。
2. 输入 Configure User Snippets 并选择它。
3. 这时会弹出一个列表，你可以选择已有的代码片段文件或者创建一个新的。如果想针对特定语言添加代码片段，选择对应的语言（例如 typescript.json）。如果想添加一个全局代码段，可以选择 New Global Snippets file。

步骤2：编辑代码片段文件

假设你选择添加一个针对JavaScript的代码段，你将会在 javascript.json 文件中工作。在这个文件中，你可以定义一个或多个代码段。每个代码段以唯一的键名开始，后跟代码段属性的定义，如下所示：

json
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

• "Print to console" 是这个代码片段的名称。
• "prefix": 触发代码片段的缩写或前缀，比如在这里输入 log 后按下 Tab 键，就会触发这个代码段。
• "body": 代码片段的主体，可以是单行或多行代码。$1, $2 表示光标位置，首先会出现在 $1 的位置，按下 Tab 键会移动到 $2。
• "description": 这是对代码片段的描述，有助于理解代码段的用途。

步骤3：保存并测试代码段

保存你的 javascript.json 文件，然后在一个 JavaScript 文件中试着输入 log 并按下 Tab 键，你就会看到 console.log(); 出现，光标位于括号内。

示例

比如你经常需要编写一段用于检测变量类型的JavaScript代码，你可以这样创建一个代码片段：

json
{
    "Check type of variable": {
        "prefix": "typeof",
        "body": [
            "if (typeof $1 === '$2') {",
            "    console.log('$1 is $2');",
            "} else {",
            "    console.log('$1 is not $2');",
            "}"
        ],
        "description": "Check the type of a variable"
    }
}

这样，每当你输入 typeof 并按下 Tab 键时，上述代码块就会自动填充，你只需要替换 $1 和 $2 为具体的变量名和类型即可。

使用自定义代码段不仅可以节省时间，还可以帮助保持代码的一致性和减少错误。希望这能帮助你在使用VS Code时提高效率！