VS Code Snippets

✨Vibe code Vue apps with confidence

RuleKit

These are some snippets that I use in VS Code to make my life easier.

Manage user snippets with ⇧ Shift+⌘ Command+P / ⇧ Shift+⌃ Control+P and then Snippets: Configure User Snippets.

{  "Pinia Options Store Boilerplate": {  "scope": "javascript,typescript",  "prefix": "pinia-options",  "body": [  "import { defineStore, acceptHMRUpdate } from 'pinia'",  "",  "export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', {",  " state: () => ({",  " $0",  " }),",  " getters: {},",  " actions: {},",  "})",  "",  "if (import.meta.hot) {",  " import.meta.hot.accept(acceptHMRUpdate(use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store, import.meta.hot))",  "}",  ""  ],  "description": "Bootstrap the code needed for a Vue.js Pinia Options Store file"  },  "Pinia Setup Store Boilerplate": {  "scope": "javascript,typescript",  "prefix": "pinia-setup",  "body": [  "import { defineStore, acceptHMRUpdate } from 'pinia'",  "",  "export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {",  " $0",  " return {}",  "})",  "",  "if (import.meta.hot) {",  " import.meta.hot.accept(acceptHMRUpdate(use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store, import.meta.hot))",  "}",  ""  ],  "description": "Bootstrap the code needed for a Vue.js Pinia Setup Store file"  } }