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

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

P粉986688829

发布： 2025-12-17 11:56:53

原创

770人浏览过

VSCode代码片段是无需插件的轻量级效率工具，通过JSON配置实现按语言或全局定制，支持占位符、预定义变量和下拉选项等智能功能，保存后即时生效。

vscode中的代码片段（snippets）：创建和使用你的代码模板

VSCode 的代码片段（Snippets）是提升编码效率的轻量级利器——不用装插件、不依赖外部工具，几行 JSON 就能把你常用的结构化代码变成一键插入的模板。

如何创建自定义代码片段

VSCode 支持为每种语言单独配置片段，也支持全局通用片段。最常用的是按语言定制：

打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Preferences: Configure User Snippets
选择目标语言（如 JavaScript）或新建全局文件（选 New Global Snippets file）
在打开的 JSON 文件中，按格式添加片段对象，每个片段以唯一键名开头，包含 prefix（触发词）、body（插入内容）、description（提示说明）

例如，为 React 函数组件写一个 snippet：

{ "React Functional Component": { "prefix": "rfc", "body": [ "const $1 = () => {", " return (", " ", " $0", " $2>", " );", "};", "", "export default $1;" ], "description": "Create a React functional component" } }

理解 body 中的占位符逻辑

代码片段的 body 是字符串数组，每项代表一行。VSCode 用特殊变量控制光标位置和跳转顺序：

jQuery图片列表动画显示效果

jQuery图片列表动画显示效果，鼠标移到图片上会弹出文字描述，非常适合做素材、网站模板主题的图片列表，兼容主流浏览器，php中文网推荐下载！使用方法： 1、在head区域引入样式表文件lrtk.css 2、在head区域引入jquery.1.4.2.min.js和lrtk.js 3、在你的网页中加入注释区域

查看详情

$0 是最终光标停留位置（插入后按 Tab 可跳到这里）
$1、$2 等是可跳转的编辑点，按 Tab 顺序切换；相同数字表示同步修改（如两个 $1 会同时被替换成同一内容）
${1:default} 表示带默认值的占位符，插入时高亮显示 default，可直接输入覆盖
$TM_FILENAME_BASE 这类预定义变量可自动填入当前文件名（不含后缀），适合生成同名组件或类

让片段更智能：支持条件与简单逻辑

原生 Snippets 不支持 if/else，但可通过预设变量和占位符组合模拟常用场景：

用 ${1|props,children,none|} 创建下拉选择，插入时弹出选项菜单（仅限 VSCode 1.80+）
组合 $TM_FILENAME_BASE 和 $1 实现「文件名作组件名 + 自定义 props」，比如：const ${1:$TM_FILENAME_BASE} = (${2:props}) => {
多行 body 中空行保留，缩进用空格或制表符（建议统一用 2 空格，适配多数 JS/TS 格式化规则）