Glean提取JSX需选中完整闭合结构，自动生成组件文件并推导名称与props，但事件函数、别名路径等需手动修正，语义化命名和职责梳理才是提效关键。
选中JSX后触发提取命令，Glean会自动创建新组件文件
直接用鼠标拖选一段JSX（比如一个<div><h2>标题</h2><p>内容</p></div>），右键菜单里会出现Glean: Extract JSX to Component选项；也可以按Ctrl+Shift+E（Windows/Linux）或Cmd+Shift+E（macOS）快捷键。注意：不能只选标签名，必须包含完整闭合的JSX结构，否则插件会报错“no valid JSX node found”。
组件名和文件路径由Glean自动推导，但可手动干预
触发后弹出输入框，默认建议名来自JSX根元素类型（如div→DivComponent）或父组件名+序号（如HomeSection1）。你应当立刻修改为语义化名称，例如UserCard或LoginForm——这直接影响后续导入路径和团队协作理解。Glean会按以下规则生成文件：
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 默认保存在
src/components/下（若该目录存在），否则 fallback 到当前文件同级目录 - 文件名使用PascalCase，扩展名匹配原文件（
.tsx优先于.jsx） - 自动添加
export default和基础props接口（TypeScript项目下生成Props类型）
props推导常漏掉动态值或事件处理函数，需人工补全
Glean能识别{user.name}、{isLoading ? '加载中' : '提交'}这类表达式，并把user、isLoading列为required prop；但它无法推断onClick绑定的是哪个函数，也不会把onSubmit={handleSubmit}里的handleSubmit自动加进props定义。常见遗漏点包括：
- 事件回调函数（如
onClick,onChange）需手动在生成的组件顶部补充类型声明 - 带解构的属性（如
{...rest}）不会被提取，得自己加React.HTMLAttributes<HTMLDivElement>等扩展 - useContext或自定义Hook返回的值不会作为prop传入，得改用组合式写法或透传
导入语句有时不准确，特别是跨目录或别名路径时
Glean依赖VSCode的TS语言服务解析当前路径，当项目用了Webpack alias（如@/components）或Vite的@alias配置时，它可能仍生成相对路径../../components/UserCard。此时要立刻检查导入行，手动替换为别名路径。另外，如果目标组件文件已存在，Glean默认不覆盖，而是追加数字后缀（UserCard1.tsx），容易造成冗余文件堆积。
