🐻 介绍 Zustand Copilot：终极 VS Code 扩展，用于 Zustand 状态管理

Source: Dev.to

如果你一直在使用 Zustand 进行 React 状态管理，你一定已经体会到它的优雅与强大。但如果还能让 Zustand 的开发体验更上一层楼呢？

今天，我很高兴地宣布 Zustand Copilot —— 一个为 Zustand v5+ 开发而打造的终极 VS Code 扩展工具包。

🤔 为什么我构建了它

在使用 Zustand 构建了数十个 React 应用后，我发现自己：

• 📝 一遍又一遍地手动编写相同的 store 样板代码
• 🔍 为了查找语法参考而不断切换到文档
• 😓 忘记在多值选择器中使用 useShallow（导致不必要的重新渲染！）
• 📁 为大型应用手动搭建 Slices Pattern

Zustand Copilot 解决了所有这些问题。

✨ 关键特性

1. TypeScript‑优先代码片段

只需输入前缀，即可获得可直接投入生产的代码。

示例 – 输入 zstore 即可得到：

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

export const useCounterStore = create()(
  devtools(
    (set) => ({
      count: 0,
      increment: () =>
        set((state) => ({ count: state.count + 1 }), false, 'increment'),
      decrement: () =>
        set((state) => ({ count: state.count - 1 }), false, 'decrement'),
      reset: () => set({ count: 0 }, false, 'reset'),
    }),
    { name: 'CounterStore' }
  )
);

2. 智能代码操作

右键单击任意 store，即可获得智能重构选项：

• Wrap with devtools – 即时添加 Redux DevTools 集成
• Wrap with persist – 添加 localStorage 持久化
• Add useShallow – 为提升性能优化你的选择器
• Extract to Slices Pattern – 将大型 store 模块化

3. 实时悬停文档

将鼠标悬停在任意 Zustand 函数上，即可看到：

• 📖 详细描述
• 📝 TypeScript 签名
• 💻 使用示例
• ⚡ 性能提示
• 🔗 官方文档链接

4. 智能自动导入

开始输入时，会获得智能导入建议，涵盖：

• create、createStore、useStore
• devtools、persist、immer
• useShallow（附性能提示！）
• StateCreator、StoreApi 类型

5. 命令驱动的 Store 生成

使用命令面板（Ctrl+Shift+P）进行：

• Create New Store – 交互式 store 生成器
• Create New Slice – 生成 slice 文件
• Generate Slices Pattern Store – 完整项目结构的 Slices Pattern store

⚡ 性能最佳实践内置

Zustand Copilot 不仅帮助你更快编写代码——还能帮助你编写 更好 的代码。

useShallow 无处不在

// ❌ Bad: Creates a new object on every render
const { name, age } = useStore((state) => ({
  name: state.name,
  age: state.age,
}));

// ✅ Good: Shallow comparison prevents re‑renders
const { name, age } = useStore(
  useShallow((state) => ({
    name: state.name,
    age: state.age,
  }))
);

当你忘记使用 useShallow 时，扩展会 提示你 并提供自动添加的选项！

切片模式（Slices Pattern）用于规模化

对于大型应用，扩展鼓励使用 切片模式：

src/stores/
├── index.ts           # 合并后的 store
└── slices/
    ├── authSlice.ts   # 身份验证
    ├── userSlice.ts   # 用户数据
    └── settingsSlice.ts # 设置

运行 Zustand: Generate Slices Pattern Store 命令即可立即生成此结构。

🚀 入门

安装

1. 打开 VS Code。
2. 按 Ctrl+Shift+X 打开扩展。
3. 搜索 “Zustand Copilot”。
4. 点击 Install。

或通过 CLI 安装：

code --install-extension devplusfun.zustand-copilot

快速开始

1. 创建一个新的 .ts 或 .tsx 文件。
2. 输入 zstore 并按 Tab。
3. 填写占位符。
4. 开始构建！ 🐻

📊 可用代码片段

🛠 配置

在 VS Code 设置中自定义此扩展：

{
  "zustandCopilot.autoImport.enabled": true,
  "zustandCopilot.hoverDocs.enabled": true,
  "zustandCopilot.codeActions.enabled": true,
  "zustandCopilot.defaultStorePath": "src/stores",
  "zustandCopilot.useShallowByDefault": true,
  "zustandCopilot.snippets.enabled": true,
  "zustandCopilot.commandPalette.enabled": true
}

🙏 欢迎反馈！

这只是 1.0.0 版本，我对后续发布有宏大的计划：

• 📊 Store 可视化面板
• 🧪 测试工具
• 🔄 Redux → Zustand 迁移工具
• 📈 性能分析

您希望看到哪些功能？ 在下方留言或在 GitHub 上打开 issue！

🔗 链接

• 📦 VS Code 市场
• 📖 Zustand 官方文档

如果此扩展对你的 Zustand 开发有帮助，请 ⭐ 给仓库加星并在市场上留下评论！这真的能帮助其他人发现它。

祝编码愉快！🐻✨

{
  "ot.includeDevtools": true
}