diff --git a/.gitignore b/.gitignore
index 9d5f506..a1ebec9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ lerna-debug.log*
 .vscode/*
 !.vscode/extensions.json
 !.vscode/settings.json
+!.vscode/*.code-snippets
 .idea
 *.suo
 *.ntvs*
diff --git a/.vscode/hook.code-snippets b/.vscode/hook.code-snippets
new file mode 100644
index 0000000..158d9ce
--- /dev/null
+++ b/.vscode/hook.code-snippets
@@ -0,0 +1,16 @@
+{
+  "Vue3 Hook 代码结构一键生成": {
+    "prefix": "Vue3 Hook",
+    "body": [
+      "import { ref } from \"vue\"\n",
+      "const refName1 = ref<string>(\"这是一个响应式变量\")\n",
+      "export function useHookName() {",
+      "\tconst refName2 = ref<string>(\"这是一个响应式变量\")\n",
+      "\tconst fnName = () => {}\n",
+      "\treturn { refName1, refName2, fnName }",
+      "}",
+      "$1"
+    ],
+    "description": "Vue3 Hook"
+  }
+}
diff --git a/.vscode/vue.code-snippets b/.vscode/vue.code-snippets
new file mode 100644
index 0000000..e0a2e4b
--- /dev/null
+++ b/.vscode/vue.code-snippets
@@ -0,0 +1,14 @@
+{
+  "Vue3 SFC 代码结构一键生成": {
+    "prefix": "Vue3 SFC",
+    "body": [
+      "<script lang=\"ts\" setup></script>\n",
+      "<template>",
+      "\t<div class=\"app-container\">...</div>",
+      "</template>\n",
+      "<style scoped></style>",
+      "$1"
+    ],
+    "description": "Vue3 SFC"
+  }
+}