VSCode代码片段是可重用的智能模板，通过前缀触发生成带占位符、变量和动态字段的代码块。例如输入log按Tab即可插入console.log()并定位光标。支持内置变量如TM_FILENAME、CURRENT_DATE，可创建含文件名和日期的注释头。通过分类管理、合理命名前缀（如rfc表示函数式组件），并与Emmet、Prettier结合使用，能显著提升编码效率。
写代码时，重复的结构和样板代码总让人觉得繁琐。VSCode 的代码片段（Snippets）功能就是为解决这个问题而生的。通过创建智能模板库，你可以用几个字母快速生成常用代码块，还能带占位符、变量和逻辑控制，极大提升编码效率。
什么是 VSCode 代码片段？
代码片段是可重用的代码模板，支持动态字段、变量插入和快捷触发。你可以在任意语言环境中定义它们，比如 JavaScript、Python 或 HTML。输入一个简短前缀后按 Tab，就能展开成完整结构。
例如：输入 log 按 Tab，自动生成 console.log() 并把光标定位在括号内。
如何创建自己的代码片段
打开 VSCode，按下 Ctrl+Shift+P 调出命令面板，输入“首选项：配置用户代码片段”，选择对应语言或新建全局片段文件。
以 JavaScript 为例，创建名为 myLog 的片段：
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}
- $1、$2 是光标停留位置，Tab 键可依次跳转
- $0 是最终光标位置
- ${1:default} 可设置默认值
让模板更智能：使用变量与表达式
VSCode 支持内置变量，如 TM_FILENAME、CURRENT_YEAR 等，可以动态填充上下文信息。
比如创建一个带时间戳的注释头：
{
"File Header": {
"prefix": "header",
"body": [
"/**",
" * File: ${TM_FILENAME}",
" * Created: ${CURRENT_DATE}",
" * Author: ${1:YourName}",
" */",
"$2"
]
}
}
每次输入 header 就能自动生成包含当前文件名和日期的注释，节省手动输入时间。
组织你的智能模板库
随着项目增多，建议按语言或用途分类管理片段。可以为 React、Node.js 或团队规范单独建立片段文件。
- 保持前缀简洁且有语义，如 rfc 表示函数式组件
- 为团队共享片段，导出为 JSON 文件并纳入版本控制
- 结合 Emmet 或 Prettier 使用，格式自动美化
合理命名和描述能让别人快速理解每个片段的作用。
基本上就这些。用好代码片段，等于给键盘装上自动编码引擎。不复杂但容易忽略。
