codebuddy 可自动为 react 组件中带 @loading 注释的 api 函数注入 zustand 加载逻辑，需配置 codebuddy.config.json 并正确标注 jsdoc，生成后支持解构 isloading 或绑定 disabled 属性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在开发前端页面时，频繁手动编写加载状态（如 loading=true、Skeleton 占位、禁用按钮）容易遗漏或不一致，CodeBuddy 能基于组件结构自动注入符合业务语义的加载逻辑，省去重复编码。
确认 CodeBuddy 插件已激活并绑定项目
打开 VS Code → 左侧扩展栏搜索「CodeBuddy」→ 点击「启用」→ 在项目根目录下确保存在 【codebuddy.config.json】 文件，内容至少包含 {"framework": "react", "stateStrategy": "zustand"}。
若 config 文件缺失，CodeBuddy 会默认跳过状态生成，且不报错提示。
标记需生成加载状态的数据请求入口
在 React 组件中，找到调用 API 的函数（如 fetchUser 或 handleSubmit），在其函数声明上方添加 JSDoc 注释 @loading：
/** @loading */<br>const fetchUser = async () => { ... }
必须写在函数声明正上方，不能隔行；若写在箭头函数或内联回调里，CodeBuddy 将无法识别。
触发自动生成
将光标置于已标注 @loading 的函数名上 → 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）→ 输入「CodeBuddy: Generate Loading State」→ 回车执行。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
这一步操作起来很简单，直接把光标放对位置就行。生成后，CodeBuddy 会在同一文件顶部自动插入 Zustand store 声明，并在函数体内注入 setLoading(true) 和 setLoading(false) 调用，同时返回一个带 isLoading 属性的对象。
在 JSX 中使用加载状态
方法一：解构使用
const { data, isLoading } = useUserStore();
然后在 JSX 中：{isLoading ? <skeleton></skeleton> : <userprofile data="{data}"></userprofile>}
方法二：直接绑定按钮禁用态
<button disabled onclick="{fetchUser}">加载用户</button>
注意：若组件未引入对应 store（如 useUserStore），TS 类型会报错，但 CodeBuddy 不校验 import 语句是否就位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
