VSCode代码片段是无需插件的轻量级效率工具，通过JSON定义触发前缀、主体内容和描述，支持光标跳转与动态变量；需按语言ID命名文件、保存至指定路径，并注意语法规范与生效条件。
VSCode 的代码片段（Snippets）是提升编码效率的轻量级利器——不用装插件、不依赖外部工具，写几行 JSON 就能复用常用结构。关键在于“按需定义”和“触手可及”，而不是堆砌一堆用不到的模板。
怎么创建自己的代码片段
打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Preferences: Configure User Snippets，回车后选择“新建全局代码片段文件”或为某语言（如 javascript.json）单独配置。
- 文件名决定作用范围：全局片段放 snippets.json，语言专属片段必须用对应语言 ID 命名（比如 python.json、typescript.json）
- 每个片段是一个键值对，键是触发前缀（如 log），值是包含 prefix、body、description 的对象
- body 是核心，支持换行和制表符；用 $1、$2 定义光标跳转位置，$0 是最终停留点；${1:default} 可设默认文本
写一个实用的 React 组件片段
比如快速生成函数组件骨架，在 javascriptreact.json 或 typescriptreact.json 中添加：
"React Component": {
"prefix": "rfc",
"body": [
"const $1 = () => {",
" return (",
" <div>$2</div>",
" );",
"};",
"",
"export default $1;"
],
"description": "React functional component"
}
保存后，在 .jsx/.tsx 文件中输入 rfc + Tab，就会展开并自动把光标定位到组件名位置（$1），再按 Tab 跳到 JSX 内容区（$2）。
片段怎么生效？常见问题排查
片段不是写完就立刻可用，要注意几个细节：
- 确保文件保存在正确路径：用户片段默认存在 ~/.vscode/snippets/（macOS/Linux）或 %USERPROFILE%\AppData\Roaming\Code\User\snippets\（Windows）
- 语言 ID 必须匹配：比如想让片段在 TypeScript React 文件中生效，就得放在 typescriptreact.json，而不是 typescript.json
- 如果片段没提示，试试重启 VSCode 或检查当前文件右下角语言模式是否正确（点击它可切换）
- 片段前缀不能含空格或特殊符号，建议全小写+短横线，比如 try-catch 可以，try catch 不行
进阶技巧：动态插入与多行缩进
片段不只是静态文本。你可以用 $TM_FILENAME_BASE 插入当前文件名（不含扩展名），适合组件命名；用 $1 和 $2 实现多点编辑；body 中每行开头的空格会被保留为缩进基准——所以写 body 时建议用两个空格对齐，避免粘连或错位。
例如，加一个带 PropTypes 的片段：
"Component with PropTypes": {
"prefix": "rfcp",
"body": [
"import PropTypes from 'prop-types';",
"",
"const $1 = ({ $2 }) => {",
" return (",
" <div>$3</div>",
" );",
"};",
"",
"$1.propTypes = {",
" $2: PropTypes.any.isRequired,",
"};",
"",
"export default $1;"
]
}
输入 rfcp + Tab 后，光标先停在组件名（$1），Tab 进入 props 占位（$2），再 Tab 到 JSX 内容（$3），逻辑清晰，改起来也快。
基本上就这些。片段不复杂但容易忽略细节，用熟了比任何快捷键都顺手。
