如何为VSCode添加自定义的代码片段？

技术教程
2025-09-26 21:10:02

首先创建JSON格式的代码片段文件，在VSCode中通过首选项进入用户代码片段，选择语言如j*ascript生成配置文件，接着定义名称、prefix触发词、body代码内容及描述，例如设置log触发console.log插入，保存后在对应语言文件中输入触发词即可自动补全，光标按$1、$2顺序跳转，支持多语言及全局片段创建。

如何为vscode添加自定义的代码片段？

为 VSCode 添加自定义代码片段，可以大幅提升编码效率。你只需创建一个 JSON 格式的片段文件，VSCode 就能识别并在输入触发词时自动补全代码。

打开用户代码片段配置

在 VSCode 中，点击顶部菜单栏的 文件 > 首选项 > 用户代码片段（Windows/Linux），或 Code > 首选项 > 用户代码片段（macOS）。之后会弹出一个搜索框，让你选择是为某种语言创建全局片段，还是针对当前项目。

输入你想添加片段的语言，比如 j*ascript，然后选择它，VSCode 会生成一个 j*ascript.json 文件供你编辑。

编写自定义代码片段

每个代码片段是一个 JSON 对象，包含名称、触发词、实际代码和描述。例如，添加一个快速生成 console.log 的片段：

jQuery可自定义高度图片瀑布流代码

jQuery可自定义高度图片瀑布流代码是一款支持自定义高度以及用URL地址直接添加图片的jQuery瀑布流特效。

64 查看详情 jQuery可自定义高度图片瀑布流代码

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

说明：
- Log to Console 是片段名称，可自定义。
- prefix 是你在编辑器中输入的触发词，如输入 log 后按 Tab 即可触发。
- body 是要插入的实际代码，支持多行。
- $1 表示光标第一次停留的位置，$2 是第二次跳转位置，按 Tab 可依次切换。
- description 是提示信息，出现在自动补全列表中。