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

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

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、在你的网页中加入注释区域

69

查看详情

• $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 格式化规则）

快速启用与调试技巧

片段写完不会立即生效，注意几个细节：

• 保存 JSON 文件后，无需重启 VSCode，新片段立刻可用
• 在对应语言的编辑器中输入 prefix（如 rfc），按下 Enter 或 Tab 即可展开
• 如果没反应，检查文件是否保存、语言模式是否匹配（右下角确认是 javascript 而非 Plain Text）
• 想查看所有已启用的片段？输入 Ctrl+Space 呼出智能提示，筛选含 prefix 的条目

基本上就这些。不需要复杂配置，也不用记一堆快捷键——把重复写的结构变成几个字母，效率提升就藏在每天几十次的 Tab 按下里。