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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-12-09

浏览次数：次

返回列表

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，这次选具体语言（如 j*ascript.json 或 typescriptreact.json）。VSCode 会为你打开对应语言的片段文件。

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

MVM mall 网上购物系统

采用 php+mysql 数据库方式运行的强大网上商店系统，执行效率高速度快，支持多语言，模板和代码分离，轻松创建属于自己的个性化用户界面 v3.5更新： 1).进一步静态化了活动商品. 2).提供了一些重要UFT-8转换文件 3).修复了除了网银在线支付其它支付显示错误的问题. 4).修改了LOGO广告管理,增加LOGO链接后主页LOGO路径错误的问题 5).修改了公告无法发布的问题,可能是打压

查看详情

{ "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 自带很多同名片段，容易覆盖或误触发