feat: add react component|hook, vue use|pinia

Author: yongbo.zeng_U+

README.md

@@ -13,16 +13,30 @@ vue-vscode-snippets 中提供了大量好用、易用的代码片段，我在日
 
 ## TODO
 
-- 🐬 [ ] react 页面模板；
-- 🦊 [ ] react hooks 模板；
+- 🐬 [√] react 页面模板；
+- 🦊 [√] react hooks 模板；
 - 🐶 [ ] axios 网络请求模板；
 
 ## Vue
 
 | snippets                       | Purpose                                            |
 | ------------------------------ | -------------------------------------------------- |
-| `up-v3-c-setup-ts-less-scoped` | Vue Single File Component With Props Setup Less Ts |
-| `up-v3-c-setup-ts-scss-scoped` | Vue Single File Component With Props Setup Scss Ts |
+| `up-v3comp-less` | Vue Single File Component With Props Setup Less Ts |
+| `up-v3comp-scss` | Vue Single File Component With Props Setup Scss Ts |
+
+
+## React
+| snippets                       | Purpose                                            |
+| ------------------------------ | -------------------------------------------------- |
+| `up-rfc` | React Functional Component |
+| `up-rcc` | React Class Component |
+| `up-ruse` | React Hook |
+
+## TypeScript
+| snippets                       | Purpose                                            |
+| ------------------------------ | -------------------------------------------------- |
+| `up-v3use` | Vue3 Composition API |
+| `up-ruse` | React Hook |
 
 ## 提示
 

package.json

@@ -1,12 +1,13 @@
 {
   "name": "up-snippets",
   "displayName": "Up Snippets",
-  "description": "Snippets that will supercharge your fontend workflow",
+  "description": "Snippets that will supercharge your frontend workflow",
   "icon": "images/vue-logo.png",
   "version": "0.0.1",
   "publisher": "Robert Zeng",
   "engines": {
-    "vscode": "^1.14.0"
+    "vscode": ">=1.70.0",
+    "node": ">=16.0.0"
   },
   "repository": {
     "type": "git",
@@ -35,10 +36,6 @@
         "language": "vue",
         "path": "./snippets/vue.json"
       },
-      {
-        "language": "vue",
-        "path": "./snippets/up.json"
-      },
       {
         "language": "jade",
         "path": "./snippets/vue-pug.json"
@@ -86,6 +83,18 @@
       {
         "language": "typescript",
         "path": "./snippets/nuxt-config.json"
+      },
+      {
+        "language": "vue",
+        "path": "./snippets/up-vue.json"
+      },
+      {
+        "language": "typescriptreact",
+        "path": "./snippets/up-react.json"
+      },
+      {
+        "language": "typescript",
+        "path": "./snippets/up-ts.json"
       }
     ]
   }

playground/index.ts

@@ -0,0 +1,19 @@
+{
+  "React Functional Component": {
+    "prefix": "up-rfc",
+    "body": [
+      "import React, { useState } from'react'",
+      "",
+      "const myComponent = () => {",
+      "\tconst [count, setCount] = useState(0)",
+      "\treturn (<>",
+      "\t\t<div>",
+      "\t\t\t<p>Count: {count}</p>",
+      "\t\t</div>",
+      "\t</>)",
+      "}",
+      "export default myComponent"
+    ],
+    "description": "React Functional Component"
+  }
+}

playground/index.tsx

@@ -0,0 +1,53 @@
+{
+  "Vue3 Composition API": {
+    "prefix": "up-v3use",
+    "body": [
+      "import { ref } from 'vue'",
+      "",
+      "export default function () {",
+      "\tconst count = ref<string>('')",
+      "",
+      "\treturn {",
+      "\t\tcount",
+      "\t}",
+      "}"
+    ],
+    "description": "Vue3 Composition API"
+  },
+  "Vue3 createPinia API": {
+    "prefix": "up-v3pinia-create",
+    "body": [
+      "import { createPinia } from 'pinia'",
+      "const pinia = createPinia()",
+      "app.use(pinia)"
+    ],
+    "description": "Vue3 createPinia API"
+  },
+  "Vue3 define Pinia Store":{
+    "prefix": "up-v3pinia-store",
+    "body": [
+      "export const useStore = defineStore('store', () => {",
+      "\tconst myStore = ref('')",
+      "\treturn {",
+      "\t\tmyStore",
+      "\t}",
+      "})"
+    ],
+    "description": "Vue3 define Pinia Store"
+  },
+  "React Hooks": {
+    "prefix": "up-ruse",
+    "body": [
+      "import { useState } from 'react'",
+      "",
+      "export default function () {",
+      "\tconst [count, setCount] = useState(0)",
+      "",
+      "\treturn [",
+      "\t\tcount",
+      "\t]",
+      "}"
+    ],
+    "description": "React Hooks"
+  }
+}

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 {
   "Vue Single File Component With Props Setup Less Ts": {
-    "prefix": "up-v3-c-setup-ts-less-scoped",
+    "prefix": "up-v3comp-less",
     "body": [
       "<template>",
       "\t<div class=\"container\">",
@@ -9,21 +9,20 @@
       "</template>",
       "",
       "<script setup lang=\"ts\">",
-      "\timport { ref } from 'vue'",
-      "\t\t${0}",
-      "\t",
+      "import { ref } from 'vue'",
+      "${0}",
       "</script>",
       "",
       "<style lang=\"less\" scoped>",
-      "\t.container {",
-      "\t\t${0}",
-      "\t}",
+      ".container {",
+      "\t${0}",
+      "}",
       "</style>"
     ],
     "description": "Vue3 Component with setup, ts, less, scoped"
   },
-    "Vue Single File Component With Props Setup Scss Ts": {
-    "prefix": "up-v3-c-setup-ts-scss-scoped",
+  "Vue Single File Component With Props Setup Scss Ts": {
+    "prefix": "up-v3comp-scss",
     "body": [
       "<template>",
       "\t<div class=\"container\">",
@@ -32,17 +31,31 @@
       "</template>",
       "",
       "<script setup lang=\"ts\">",
-      "\timport { ref } from 'vue'",
-      "\t\t${0}",
-      "\t",
+      "import { ref } from 'vue'",
+      "${0}",
       "</script>",
       "",
       "<style lang=\"scss\" scoped>",
-      "\t.container {",
-      "\t\t${0}",
-      "\t}",
+      ".container {",
+      "\t${0}",
+      "}",
       "</style>"
     ],
     "description": "Vue3 Component with setup, ts, less, scoped"
+  },
+  "Vue3 Composition API": {
+    "prefix": "up-v3use",
+    "body": [
+      "import { ref } from 'vue'",
+      "",
+      "export default function () {",
+      "\tconst count = ref<string>('')",
+      "",
+      "\treturn {",
+      "\t\tcount",
+      "\t}",
+      "}"
+    ],
+    "description": "Vue3 Composition API"
   }
 }