结论：VSCode 内置代码片段配合少量配置即可满足90%功能性代码生成需求；rfc、rcc等快捷键来自ES7+ React/Redux/GraphQL/React-Native Snippets插件，但其模板静态且TS支持弱，自定义JSON片段更可控，需确保语言模式为javascriptreact、prefix为字符串、body为合法JSON数组。
直接说结论：不用装一堆插件，VSCode 内置代码片段（Snippets）配合少量配置就能覆盖 90% 的功能性代码块生成需求；插件只是锦上添花，不是刚需。
rfc、rcc 等快捷键来自哪个插件？
这些是 ES7+ React/Redux/GraphQL/React-Native Snippets 插件提供的。它把常见 React 模板封装成前缀 + Tab 触发，比如：
-
rfc→ 无状态函数组件（export default function X() { return ... }） -
rcc→ 类组件（export default class X extends Component { render() { ... } }） -
uef→useEffect(() => { }, [])
但注意：这个插件的模板是静态的，不随项目规范变化（比如默认用双引号、带分号），且对 TypeScript 支持有限。如果团队强制要求 const MyComponent = () => 形式或 React.FC 类型，它就帮不上忙。
自己写代码片段比装插件更可控
VSCode 原生支持语言专属片段，路径和格式固定，修改即生效。关键点：
- 触发语言 ID 是
javascriptreact（不是jsx或react），对应 .js/.jsx 文件 - 片段文件必须是合法 JSON，字段必须包含
prefix、body、description -
body是字符串数组，每行一个元素；$1、$2是光标跳转占位符，$0是最终停留位置
例如，定义一个带 React.FC 和 props 占位符的函数组件：
{
"rfc-fc": {
"prefix": "rfcfc",
"body": [
"import React from 'react';",
"",
"interface Props {",
" $1",
"}",
"",
"const $2: React.FC<Props> = ({ $1 }) => {",
" return (",
" <div>$0</div>",
" );",
"};",
"",
"export default $2;"
],
"description": "React.FC component with props interface"
}
}
为什么写了片段却不弹出？
最常见失效原因就三个：
- 文件当前语言模式不对：右下角状态栏显示的是
Plain Text或JavaScript，而不是JavaScript React—— 必须手动点击切换或用快捷键Ctrl+K M选javascriptreact -
prefix字段不是字符串类型（比如误写成数字或布尔值） -
body数组里混入了注释或空行以外的非法字符（JSON 不允许注释，也不允许尾逗号）
还有一个隐性坑：全局片段（common.code-snippets）在 JSX 中默认不生效，因为语言匹配优先走 javascriptreact 专属文件。
真正难的不是写多少片段，而是让每个片段在正确时机、以正确形式插入——比如是否自动 import、是否带默认 props、是否适配 ESLint 规则。这些细节不靠试错，得靠反复验证实际编辑场景。
