如何通过制作并安装自定义扩展添加代码片段（snippets）

1. 搭建扩展基础结构 #

先创建如下项目目录：

my-snippet-extension/
├── package.json
├── snippets/
│   └── javascript.json  # 按语言分类存放片段，可新增html.json、css.json等
└── README.md（可选）

2. 配置package.json核心字段 #

必须在package.json中添加contributes.snippets，用来关联你的代码片段文件：

{
  "name": "my-custom-snippets",
  "displayName": "My Custom Snippets",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.80.0"
  },
  "contributes": {
    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets/javascript.json"
      },
      {
        "language": "html",
        "path": "./snippets/html.json"
      }
    ]
  }
}

• language：对应VS Code内置的语言标识（比如python、typescript），可通过设置里的files.associations查看对应值
• path：片段文件相对于项目根目录的路径

3. 编写代码片段文件 #

片段格式和手动添加的完全一致，比如snippets/javascript.json：

{
  "带变量的控制台打印": {
    "prefix": "logvar",
    "body": [
      "console.log('${1:变量名}:', ${1:变量名});"
    ],
    "description": "带标签的变量打印"
  },
  "Async函数模板": {
    "prefix": "asyncfunc",
    "body": [
      "async function ${1:函数名}() {",
      "  try {",
      "    ${2:// 业务代码}",
      "  } catch (error) {",
      "    console.error(error);",
      "  }",
      "}"
    ],
    "description": "带try-catch的异步函数模板"
  }
}

每个片段的核心结构：{ "片段名称": { "prefix": "触发前缀", "body": "代码内容（数组/字符串）", "description": "功能描述" } }

4. 本地测试扩展 #

• 在VS Code中打开你的扩展项目文件夹
• 按F5启动「扩展开发主机」窗口，你的扩展会自动加载到这个新窗口
• 在新窗口中打开对应语言的文件，输入设置的prefix（比如logvar），就能调用自定义片段

5. 打包并正式安装（可选） #

• 全局安装打包工具：npm install -g @vscode/vsce
• 项目根目录执行vsce package，生成.vsix格式的扩展包
• 在VS Code扩展面板点击右上角...，选择「从VSIX安装」，选中生成的文件即可完成安装

注意事项 #

• 片段文件必须严格遵循JSON语法，否则扩展会加载失败
• 若要支持更多语言，只需在contributes.snippets中新增对应语言的条目即可

内容的提问来源于stack exchange，提问作者Suge