VSCode代码片段（Snippets）：创建和使用你的代码模板-VSCode-PHP中文网

VSCode代码片段（Snippets）：创建和使用你的代码模板

P粉986688829

发布： 2025-12-09 14:17:03

原创

471人浏览过

VSCode代码片段是提升编码效率的轻量工具，通过JSON配置可复用模板，支持全局或按语言定制、变量占位与跳转；需注意前缀避免冲突，修改实时生效。

vscode 的代码片段（snippets）是你提升编码效率最直接、最轻量的工具之一——不用装插件，写几行 json 就能复用常用结构，比如组件模板、循环骨架、接口定义，甚至带变量占位和跳转顺序的交互式代码块。

一、快速创建一个全局代码片段

按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Preferences: Configure User Snippets，回车后选择 New Global Snippets file…，起个名字（如 my-react），就会生成一个 my-react.code-snippets 文件。

在里面写一个基础片段示例：

{ "log with timestamp": { "prefix": "logt", "body": [ "console.log('%c${1:msg}', 'color: #007acc;', ${2:val});" ], "description": "带样式的 console.log，光标先停在 msg，再跳到 val" } }

保存后，在任意 JS/TS 文件中输入 logt + Tab，就能展开并自动定位编辑点。

二、为特定语言单独配置片段

更推荐的方式是按语言定制：同样打开命令面板，选 Configure User Snippets，这次选具体语言（如 javascript.json 或 typescriptreact.json）。VSCode 会为你打开对应语言的片段文件。

比如在 typescriptreact.json 中添加一个函数组件模板：

启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。

查看详情

{ "React FC template": { "prefix": "rfc", "body": [ "const ${1:ComponentName} = ({", "\t${2:props}: ${3:Props},", "}) => {", "\treturn (", "\t\t", "\t\t\t${5:/* content */}", "\t\t$4>", "\t);", "};", "", "export default ${1:ComponentName};" ], "description": "React 函数组件基础结构，支持多光标跳转" } }

注意：${1:xxx} 表示第一个跳转位置，${2:yyy} 是第二个，依此类推；相同数字（如多个 ${1:…}）会同步编辑。

三、实用技巧和常见写法

换行和缩进：用 \n 换行，但 VSCode 片段会自动根据当前文件缩进补空格，所以写 body 时保持自然缩进即可（如上面例子中用 2 空格对齐）
插入当前文件名：用 $TM_FILENAME_BASE，适合写默认导出名或样式类名
条件判断不支持：Snippets 是静态模板，不能 if/else；复杂逻辑建议用扩展（如 ESLint + Code Actions）或自定义脚本
避免冲突前缀：别用太短或太通用的 prefix（如 if、for），VSCode 自带很多同名片段，容易覆盖或误触发