Pinia Snippets (Visual Studio Code)

Everyday Pinia patterns for VS Code: stores, composition, plugins, persistence, SSR and testing, plus the full public API.

中文文档

Requirements

Snippets target the current Pinia 4, which requires Vue >= 3.5.11 and TypeScript >= 5.6. Vue 2 / Pinia 2 are not covered.

Works in .vue, .js, .ts, .jsx and .tsx. Each snippet declares its own languages: the ones that generate a whole store, plugin or test file are offered in .js / .ts only, and can be created straight from File > New File…. .vue recognition comes from Vue - Official.

Prefixes

Prefixes follow two patterns:

The API name is the prefix — defineStore, store.$patch, acceptHMRUpdate, skipHydrate. A Pinia API's name is the code you are about to write, so there is no mapping to memorize first.
Most snippets also answer to a short alias — ds = defineStore, sp = store.$patch, pu = pinia.use. Both forms sit on the same snippet, so the alias is a speed-up once you know it, never the way in.

Every snippet is named Pinia …, so the completion list tells you which domain a suggestion came from.

Scenarios

Each of these inserts a complete, working block you only need to rename a few things in. ds, dsa, dso, dsc, dsf and pssr derive the store name and id from the file name: counter.ts yields useCounterStore / 'counter'; both user-profile.ts and userProfile.ts yield useUserProfileStore / 'user-profile'.

Prefix	Alias	Inserts
`pinia`	`cp`	Application entry — create and install the pinia instance
`defineStore`	`ds`	A complete Setup Store file: state / getters / actions + HMR
`defineStoreAsync`	`dsa`	A remote list store with loading and error state
`defineStoreOptions`	`dso`	A complete Option Store file
`defineStoreCompose`	`dsc`	One store composed from another
`defineStoreForm`	`dsf`	Form state with `$reset()` after submit
`useStore`	`us`	Use a store in `<script setup>`
`useStoreOptions`	`uso`	Use a store from the Options API
`useStoreOutside`	`pout`	Use a store outside components (router guards, interceptors)
`piniaPersist`	`pper`	Persist one store to localStorage with `$subscribe()`
`piniaPlugin`	`pplugin`	A plugin that persists every store
`piniaOnAction`	`plog`	A plugin that logs every action's timing and errors
`piniaTest`	`ptest`	A store unit test file
`piniaTestComponent`	`ptestc`	A component test with `createTestingPinia()`
`piniaSSR`	`pssr`	An SSR store using `skipHydrate()`

API — stores

Prefix	Alias	Inserts
`ims`		Import a store and instantiate it
`imstr`		Import `storeToRefs()` and destructure state
`storeAction`	`pact`	Setup Store `action()` helper (Pinia 4)
`acceptHMRUpdate`	`phmr`	Hot Module Replacement for a store (Vite)

API — Options API map helpers

Prefix	Alias	Inserts
`imms`		Import + `mapState()`
`imma`		Import + `mapActions()`
`immws`		Import + `mapWritableState()`
`imss`		Import + `mapStores()`
`ms`		`mapState()` — state and getters as readonly computed
`ma`		`mapActions()` — actions as methods
`mws`		`mapWritableState()` — state as writable computed (`v-model`)
`mss`		`mapStores()` — whole stores as computed
`setMapStoreSuffix`	`smss`	Change the suffix `mapStores()` appends

API — store instance

Prefix	Alias	Inserts
`store.$patch`	`sp`	`$patch()` with a function — the form for collections
`store.$patchObject`	`spo`	`$patch()` with a partial state object
`store.$state`	`sst`	Replace a store's whole state
`store.$reset`	`sr`	Reset state to its initial value
`store.$subscribe`	`ss`	Watch state changes
`store.$onAction`	`sa`	Watch actions, with `after()` and `onError()`
`store.$dispose`	`sd`	Stop one store's effects and subscriptions

API — pinia instance

Prefix	Alias	Inserts
`pinia.use`	`pu`	Register a plugin
`pinia.state`	`pstate`	Read or replace the root state of every store
`setActivePinia`	`sap`	Make an instance active with no app mounted
`getActivePinia`	`gap`	Read the currently active instance
`disposePinia`	`dp`	Dispose an entire instance

API — SSR

Prefix	Alias	Inserts
`skipHydrate`	`skh`	Mark state as non-hydratable
`shouldHydrate`	`shy`	Check whether a value is hydratable

Also useful

Vue 3 Snippets — official Vue 3 examples and test cases. Reactivity primitives like ref() / computed() live there; this extension only covers Pinia-specific code.
JavaScript Code Snippet — from MDN documentation.
JavaScript Comment Snippet — JSDoc / ESDoc comment blocks.

References

MIT licensed. See LICENSE.

Donate

xianghongai@gmail.com

Pinia Snippets

XiangHongAi