Vscode插件

vscode插件

代码片段 在js.json中配置

{
  "axios": {
    "prefix": "axios",
    "body": [
      "axios({",
      "    method:'GET',",
      "    url:'',",
      "    // params:{}//get请求的参数写在这里面",
      "    // data:{}//post请求的参数写在这里面",
      "}).then(res=>{",
      "    console.log(res.data);",
      "})"
    ],
    "description": "axios"
  },
  "vuex": {
    "prefix": "vuex",
    "body": [
      "// 两根线",
      "// 同步：组件 commit -> mutations -> state",
      "// 异步： 组件 dispatch -> actions -> commit -> mutations -> state ",
      "export default {",
      "  // 开启命名空间",
      "  namespaced: true,",
      "  // 放数据的地方",
      "  state: {},",
      "  // 相当于组件中计算属性",
      "  getters: {},",
      "  // 这个是唯一修改state中数据地方",
      "  mutations: {",
      "    // setCount(state) {}",
      "  },",
      "  // 写异步的ajax的地方",
      "  actions: {",
      "    // store.commit()",
      "    // getData(store){}",
      "  }",
      "}"
    ],
    "description": "vuex"
  },
  "pinia": {
    "prefix": "pinia",
    "body": [
      "import {ref} from 'vue'",
      "import {defineStore} from 'pinia'",
      "export const user$0Store = defineStore('$0',()=>{",
      "",
      "    return {",
      "        ",
      "    }",
      "})"
    ],
    "description": "pinia"
  }
}

在vue.json中配置

{
  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "vue": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>$1</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data() {",
      "    return {}",
      "  },",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style scoped></style>",
      ""
    ],
    "description": "vueless"
  },
  "vueless": {
    "prefix": "vueless",
    "body": [
      "<template>",
      "  <div>$1</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data() {",
      "    return {}",
      "  },",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style scoped lang='less'></style>",
      ""
    ],
    "description": "vue"
  },
  "vuesass": {
    "prefix": "vuesass",
    "body": [
      "<template>",
      "  <div>$1</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data() {",
      "    return {}",
      "  },",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style scoped lang='scss'></style>",
      ""
    ],
    "description": "vuesass"
  },
  "vue3": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "$0",
      "</template>",
      "<script>",
      "// import {} from 'vue'",
      "export default {",
      "  setup () {",
      "   ",
      "    return {",
      "",
      "    }",
      "  }",
      "};",
      "</script>"
    ],
    "description": "vue3"
  },
  "vue3setup": {
    "prefix": "vue3setup",
    "body": ["<template>", "$0", "</template>", "<script setup>", "// import {} from 'vue'", "", "</script>"],
    "description": "vue3setup"
  }
}