自定义VS Code代码片段（Snippets）完全手册

答案：通过创建用户级或项目级代码片段，使用JSON格式定义触发词、描述和代码体，并利用变量与占位符提升灵活性，可高效定制VS Code代码片段，如为JavaScript设置"log"快速输出日志，或为React组件创建"rfc"模板，显著提升编码效率。

Visual Studio Code 的代码片段（Snippets）功能能显著提升编码效率，尤其适合重复性高或结构固定的代码块。通过自定义 Snippets，你可以用几个字母快速生成一整段代码，节省时间并减少错误。以下是如何全面掌握 VS Code 自定义代码片段的实用指南。

1. 创建用户级或项目级代码片段

VS Code 支持两种级别的 Snippets：全局（用户级）和项目级（工作区级）。前者适用于所有项目，后者只在当前项目生效。

• 用户级 Snippets：打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 “Preferences: Configure User Snippets”，选择对应语言（如 JavaScript、Python 等），会生成一个全局的 JSON 文件。
• 项目级 Snippets：在命令面板中选择 “Configure Workspace Snippets”，会在当前项目的 .vscode 目录下创建 snippets 文件（如 snippets.json），仅对该项目有效。

2. 编写 Snippet 结构：JSON 格式详解

每个 Snippet 是一个 JSON 对象，包含触发词、描述和实际代码内容。基本结构如下：

{
  "Log to Console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "输出日志到控制台"
  }
}

• Log to Console：Snippet 名称，可任意命名，不影响使用。
• prefix：触发关键词，输入它才会弹出该片段，比如输入 log 后按 Tab 即可展开。
• body：实际插入的代码，支持多行数组格式。若单行可用字符串。
• description：在自动补全提示中显示的说明文字。

3. 使用变量与占位符提升灵活性

Snippet 支持动态变量和占位符，让插入的代码更智能。

• $1, $2, ...：Tab 键跳转的占位位置，$1 是第一个焦点，$2 是第二个，以此类推。$0 表示最终位置。
• ${1:default}：带默认值的占位符，例如 ${1:name} 会在光标处显示 “name” 作为提示，可直接修改。
• 常用变量：如 $TM_FILENAME（当前文件名）、$CURSOR（原光标位置）、$CURRENT_YEAR、$SELECTION（选中文本）等，可用于生成文件头或版权信息。

示例：创建一个带时间戳的注释片段

Img.Upscaler

免费的AI图片放大工具

下载

{
  "File Header": {
    "prefix": "header",
    "body": [
      "/**",
      " * File: $TM_FILENAME",
      " * Created: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      " * Author: ${1:Your Name}",
      " */",
      "$2"
    ],
    "description": "插入文件头信息"
  }
}

4. 针对特定语言定制片段

{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = () => {",
      "  return (",
      "    
",
      "      ${2:Content}",
      "    
",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "创建一个 React 函数组件"
  }
}