如何创建和使用你自己的VSCode代码片段（Snippets）

VSCode代码片段可大幅提升编码效率。一、用户级片段适用于通用逻辑，通过命令面板配置JSON文件实现；二、工作区片段仅限当前项目，需在.vscode/snippets/下创建；三、支持内置变量、正则转换、条件占位符等动态功能；四、管理时注意prefix长度、description清晰性，修改后保存即生效。

VSCode 的代码片段（Snippets）能帮你省下大量重复敲代码的时间，尤其适合常用结构、组件模板或特定框架的样板代码。关键不是“能不能写”，而是“怎么写得顺手、好维护、真有用”。

一、创建你自己的用户级代码片段

这是最灵活的方式，适用于通用逻辑，比如 console.log、函数声明、React 函数组件等。

• 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Preferences: Configure User Snippets
• 选择语言（如 JavaScript）或新建全局文件（选 New Global Snippets file）
• VSCode 会生成一个 javascript.json（或 snippets.code-snippets）文件，里面是 JSON 格式

例如，加一个快速打印变量名和值的 snippet：

{
  "log with name": {
    "prefix": "ln",
    "body": ["console.log('$1:', $1);"],
    "description": "console.log('varName:', varName)"
  }
}

保存后，在 JS 文件中输入 ln + Tab，就会展开成 console.log('xxx:', xxx);，光标自动停在 xxx 位置供你编辑。

二、为特定项目定制工作区片段

如果你的团队有统一的组件结构、API 调用模式或测试写法，用工作区片段更合适——它只在当前文件夹生效，不污染全局。

• 在项目根目录创建 .vscode/snippets/ 文件夹
• 在里面新建 react-component.json（文件名随意，后缀必须是 .json）
• 内容格式和用户 snippet 完全一样，但只对这个工作区生效

比如定义一个 React 函数组件骨架：

Avactis购物车

Avactis是一个强大的PHP在线购物系统拥有多个版本包括开源版本。它具备一个在线购物系统所需要的所有功能从产品到会员管理，订单和营销。可以无限分类和为产品指定任务数量的图片（支持自动生成缩略图）。使用自定义字段功能，让你可以更好地定义一个产品。该系统提供以非常灵活的方式来创建任意类型的促销活动如设置折扣代码，基于价格的折扣或基于数量的折扣等。

0

查看详情

{
  "React FC": {
    "prefix": "rfc",
    "body": [
      "const $1 = () => {",
      "  return (",
      "    <$2>",
      "      $0",
      "    </$2>",
      "  );",
      "};",
      "",
      "export default $1;"
    ],
    "description": "React functional component"
  }
}

$1 是第一个跳转位（组件名），$2 是第二个（根标签），$0 是最终光标停留处。按 Tab 键可顺序切换占位符。

三、实用技巧：让 snippet 更聪明

纯静态替换只是入门。真正提效的是带逻辑的动态内容：

• 变量支持：除了 $1，还能用 ${TM_FILENAME_BASE}（当前文件名无后缀）、${CURRENT_YEAR}、${CLIPBOARD} 等内置变量
• 简单转换：比如把输入的 userName 自动转成 user-name：${1/(.*)/${1:/kebabcase}/}
• 条件占位符：支持 ${1:default}，没输入时显示默认值；${1?yes:no} 可做简易判断（较少用，但存在）
• 多行缩进自动对齐：VSCode 会根据你触发 snippet 时的缩进级别，自动调整整个代码块的缩进

四、管理和调试 snippet

写多了容易混乱，几个小建议：

• prefix 别太短（比如 c 太泛），也别太长（my-awesome-react-component-boilerplate 不现实），2~4 字母较平衡（rfc、useq）
• description 要写清楚用途，尤其多人共用时，避免“what is this?”尴尬
• 改完 snippet 后不用重启 VSCode，保存即生效
• 如果没反应，检查 language ID 是否匹配（比如你在 TypeScript 文件里写了 JavaScript snippet，就可能不触发）

可以在命令面板运行 Developer: Toggle Developer Tools 查看控制台是否有 snippet 加载错误。

基本上就这些。不需要写插件、不用编译，改个 JSON 就能立刻提升日常编码节奏。关键是从小处开始——先把你每天敲 5 遍以上的结构做成 snippet，慢慢叠加，效率自然上来。

以上就是如何创建和使用你自己的VSCode代码片段（Snippets）的详细内容，更多请关注php中文网其它相关文章！