Zustand Copilot

The definitive toolkit for Zustand state management in VS Code.

Zustand Copilot supercharges your Zustand development experience with intelligent TypeScript-first snippets, automated code actions, smart auto-imports, and real-time documentation - all designed for Zustand v5+ best practices.

✨ Features

📝 TypeScript-First Snippets

Prefix	Description
`zstore`	Create a basic Zustand store with TypeScript and devtools
`zslice`	Create a slice for the Slices Pattern
`zpersist`	Create a store with persist middleware
`zasync`	Create a store with async actions and loading states
`zimmer`	Create a store with Immer for mutable updates
`zslices`	Create a combined store using the Slices Pattern
`zshallow`	Use `useShallow` for selecting multiple values
`zselector`	Create a memoized selector function
`zsubscribe`	Subscribe to store changes with selector
`zgetstate`	Get and set store state outside React
`zcontext`	Create a Zustand store with React Context pattern
`zcomputed`	Create a store with computed/derived properties
`zreset`	Create a store with proper reset functionality
`zmiddleware`	Create a store with full middleware stack
`zactions`	Create a store with separate actions interface
`ztemporal`	Create a store with undo/redo using zundo
`zimp*`	Various import snippets

⚡ Quick Actions (Code Actions)

Wrap with devtools - Automatically wrap existing stores with devtools middleware
Wrap with persist - Add persistence to existing stores
Add useShallow - Optimize selectors for performance
Add TypeScript types - Convert JavaScript stores to TypeScript
Extract to Slices Pattern - Refactor large stores into modular slices

📦 Smart Auto-Import

Intelligent import suggestions for:

Core: create, createStore, useStore
Middleware: devtools, persist, createJSONStorage, subscribeWithSelector, immer
Types: StateCreator, StoreApi, UseBoundStore
React utilities: useShallow (with performance hints!)

📚 Hover Documentation

Real-time documentation for Zustand v5+ syntax including:

Function signatures
Usage examples
Performance tips
Links to official documentation

🛠 Commands

Access via Command Palette (Ctrl/Cmd + Shift + P):

Command	Description
`Zustand: Create New Store`	Generate a new store file with prompts
`Zustand: Create New Slice`	Generate a slice file for Slices Pattern
`Zustand: Create Persisted Store`	Generate a store with localStorage
`Zustand: Wrap Store with Devtools`	Add devtools to existing store
`Zustand: Wrap Store with Persist`	Add persist to existing store
`Zustand: Generate Slices Pattern Store`	Create full slices structure
`Zustand: Add useShallow Selector`	Optimize existing selectors
`Zustand: Show Documentation`	Open built-in docs panel

🚀 Quick Start

Create Your First Store

Open a TypeScript file
Type zstore and press Tab
Fill in the placeholders

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

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

export const useCounterStore = create<CounterState>()(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' }));

Use with Performance Optimization

import { useShallow } from 'zustand/react/shallow';

// ✅ Good: Uses useShallow for multiple values
const { name, age } = useUserStore(
  useShallow((state) => ({ name: state.name, age: state.age }))
);

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

📐 Slices Pattern

For scalable applications, use the Slices Pattern:

src/stores/
├── index.ts           # Combined store
└── slices/
    ├── authSlice.ts   # Authentication slice
    ├── userSlice.ts   # User data slice
    └── settingsSlice.ts # Settings slice

Type zslice to create a slice, or use the command Zustand: Generate Slices Pattern Store to create the full structure automatically.

⚙️ Configuration

Customize Zustand Copilot in your VS Code settings:

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

🔗 Links

Made with ❤️ by Mahmud Rahman

Enjoy building with Zustand!