Vscode 代码片段

1:打开Vscode

2： 点击配置用户代码片段

3： 你可以新建自己的全局代码片段

4：输入创建自己代码片段文件的名称

5： 进入之后将你需要的代码片段 ctrl + c 粘贴进去即可

效果展示

// pinia 快捷生成代码

 "pinia": { //代码片段的名称
  "prefix": "pinia", // 快捷生成代码 快捷指令
  "body": [
    "import { defineStore } from \"pinia\"",
    "",
    "const $TM_FILENAME_BASE = defineStore('$TM_FILENAME_BASE',{", //$TM_FILENAME_BASE 获取当前的文件名称
    "  state:() =>({",
    "",
    "  }),", 
    "  actions:{",
    "",
    "  },",
    "  getters: {",
    "    ",
    "  }",
    "})",
    "",
    "export default $TM_FILENAME_BASE"
  ],
  "description": "" // 代码片段的描述 
  }

 // Vuex 快捷生成代码

  "Product Vuex Code": {
    "prefix": "vuex",
    "body": [
      "",
      "export default{",
      "namespaced: true,",
      "state: {},",
      "",
      "mutations:{},",
      "",
      "actions:{},",
      "",
      "getters: {},",

      "modules: {},",
      "};",
    ],
    "description": ""
    
  },

// Vue2代码片段 

 "Product Vue Template ": {
    "prefix": "vue",
    "body": [
      "<template>",
      "<div class='$TM_FILENAME_BASE'>$5</div>",
      "</template>",
      "",
      "<script>",
      "",
      "export default {",
      "  name: '$TM_FILENAME_BASE',",
      "components: {},",
      "data() {",
      "return {",
      "",
      "};",
      "},",
      "methods: {",
      "",
      "},",
      "}",
      "</script>",
      "",
      "<style lang='scss' scoped>",
      "$4",
      "</style>"
    ],
    "description": ""
  },

// vue3代码片段
 "vue3": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script lang=\"ts\" setup>",
      "</script>",
      "",
      "<style scoped></style>",
      ""
    ],
    "description": ""
  },

// 当然还有react 的

 // React 快捷生成
  "React Function":{
    "prefix": "react-F",
    "body": [
      "const $TM_FILENAME_BASE = () =>",
      "{",
      "",
      "return(",
      "<div>$TM_FILENAME_BASE </div>",
      ")",
      "}",
      "",
      "export default $TM_FILENAME_BASE "
    ],
    "description": "Log output to console"
  },
  "React IndexFile Product":{
    "prefix": "react-I",
    "body": [
      "import React from 'react'",
      "import ReactDOM from 'react-dom/client';",
      "import App from './App';",
      "",
      "const root = document.querySelector('#root')",
      "",
      "ReactDOM.createRoot(root).render(",
      "",
      "<React.StrictMode>",
      "",
      "<App></App>",
      "</React.StrictMode>",
      ")",
      ""
    ],
    "description": "Log output to console"
  },

小伙伴们可以自行定义自己的风格，如果觉得帮到你，请点个赞,谢谢!!