代码片段可大幅提升编码效率，通过自定义JSON模板为语言创建快捷输入，如React组件用rfc触发，支持动态变量$CURRENT_YEAR、$TM_FILENAME及占位符嵌套，实现智能生成代码与注释，减少重复劳动并统一风格。
在 VS Code 中，代码片段（Snippets）是一种强大的工具，能大幅提升编码效率。通过预定义的智能模板，开发者可以快速插入常用代码结构，甚至实现动态内容生成。合理使用代码片段，不仅能减少重复劳动，还能保证代码风格统一。
自定义代码片段的创建方式
VS Code 支持用户为特定语言创建个性化代码片段。操作路径简单：
- 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）
- 输入“首选项：配置用户代码片段”
- 选择目标语言（如 JavaScript、Python 等），或编辑全局片段文件
- 按 JSON 格式填写名称、前缀、主体和描述
{
"Create Functional Component": {
"prefix": "rfc",
"body": [
"import React from 'react';",
"",
"const $1 = () => {",
" return (",
" <div>$2</div>",
" );",
"};",
"",
"export default $1;"
],
"description": "生成一个基础函数式组件"
}
}
保存后，在 .jsx 文件中输入 rfc 即可触发该片段，$1 和 $2 是占位符，可通过 Tab 键跳转编辑。
动态变量与占位符的灵活运用
VS Code 内置多个动态变量，可在代码片段中自动填充上下文信息，提升智能化程度。
- $CURRENT_YEAR：插入当前年份（如 2024）
- $CURRENT_MONTH：当前月份（01–12）
- $TM_FILENAME：当前文件名
- $CLIPBOARD：粘贴剪贴板内容
这些变量适合用于生成注释头、日志记录或版权信息。比如创建一个文件头模板：
"File Header": {
"prefix": "header",
"body": [
"/**",
" * File: $TM_FILENAME",
" * Created: $CURRENT_DATE",
" * Author: ${1:Your Name}",
" */"
]
}
输入 header 后，自动生成带时间与文件名的注释块， 可编辑作者名。
支持嵌套逻辑与条件输入
虽然 VS Code 片段不支持复杂编程逻辑，但可通过占位符嵌套和默认值实现一定灵活性。
- ${1:default}：第一个可编辑位置，默认值为 default
- ${2:props}：第二个位置，默认 props
- $0：最终光标停留位置
还可以嵌套变量，例如在 HTML 类名中复用组件名：
"Styled Div Block": {
"prefix": "sdiv",
"body": [
"<div class=\"${1:container}\">",
" ${2:Content}",
"</div>",
"<style>",
".${1:container} {",
" $0",
"}"
"</style>"
]
}
这里 $1 在 class 和样式中同步更新，修改一处，多处响应，减少重复输入。
基本上就这些。掌握代码片段的写法，结合实际开发场景定制模板，能让日常编码更流畅。关键是多积累高频模式，把重复工作交给编辑器处理。
