VSCode中的代码片段(Snippets)创建与使用教程-VSCode-PHP中文网

VSCode中的代码片段(Snippets)创建与使用教程

P粉986688829

发布： 2025-12-18 20:04:02

原创

610人浏览过

VSCode代码片段通过prefix触发，支持占位符、内置变量和条件判断，可在JSON中配置全局或语言专属片段以提升编码效率。

vscode中的代码片段(snippets)创建与使用教程

VSCode 的代码片段（Snippets）是提升编码效率的利器，不用重复写模板代码，几秒就能插入结构化内容。关键在于理解它的作用域、语法和触发方式，而不是堆砌功能。

如何创建自定义代码片段

VSCode 支持全局（所有语言）和语言专属两种片段。推荐优先为当前项目或常用语言定制：

打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入并选择 Preferences: Configure User Snippets
选择目标语言（如 javascript）或新建全局文件（如 New Global Snippets file）
在打开的 JSON 文件中按格式添加片段，例如为 JS 添加一个函数模板：

{
  "log function": {
    "prefix": "logfn",
    "body": [
      "function ${1:name}(${2:params}) {",
      "\t$0",
      "}"
    ],
    "description": "Create a named function with log-ready body"
  }
}

登录后复制

其中 ${1:name} 是第一个可编辑占位符（带默认值 name），$0 是最终光标停留位置，prefix 是触发关键词。

片段怎么用：触发与编辑

写代码时，只要输入设定的 prefix（如 logfn），VSCode 会自动提示该片段。回车确认后：

ECTouch移动商城系统

ECTouch是上海商创网络科技有限公司推出的一套基于 PHP 和 MySQL 数据库构建的开源且易于使用的移动商城网店系统！应用于各种服务器平台的高效、快速和易于管理的网店解决方案，采用稳定的MVC框架开发，完美对接ecshop系统与模板堂众多模板，为中小企业提供最佳的移动电商解决方案。ECTouch程序源代码完全无加密。安装时只需将已集成的文件夹放进指定位置，通过浏览器访问一键安装，无需对已有

查看详情

光标跳到第一个占位符（${1:name}），可直接修改函数名
按 Tab 跳转到下一个占位符（${2:params}），再按一次跳到 $0（函数体内部）
支持多光标编辑：如果多个位置用了相同变量名（如 ${1:name} 和 ${1}），修改一处会同步更新其他同编号占位符

让片段更实用的小技巧

真实开发中，简单替换不够用。可以加入动态内容和上下文控制：

内置变量：用 $CURRENT_YEAR、$TM_FILENAME_BASE（当前文件名不含后缀）、$CLIPBOARD 直接插入系统信息或粘贴板内容
条件判断（仅限 VSCode 1.86+）：用 ${1/(true|false)/$1=='true'?'✅':'❌'/} 实现简单逻辑映射
作用域限制：在 language-specific 片段中，它只在对应语言文件里生效；若想在 .vue 的 <script> 区块生效，需设置 <strong>"scope": "<a style="color:#f60; text-decoration:underline;" title= "java"href="https://www.php.cn/zt/15731.html" target="_blank">javascript,vue"</script>