vscode代码片段配置

vscode代码片段配置


设置 》用户代码片段 》新建全局代码文件》vue.json

{

  "v2": {
    "prefix": "v2",
    "body": [
      "<template>",
      "  <div>${1}</div>",
      "</template>",
      "<script>",
      "export default {",
      "  name:'',",
      "  data() {",
      "    return {}",
      "  },",
      "  mounted(){},",
      "  methods:{}",
      "}",
      "</script>",
      "<style scoped lang='scss'></style>"
    ],
    "description": "Log output to console"
  },
  "v3": {
    "prefix": "v3.0",
    "body": [
      "<template>",
      "  <div>${1}</div>",
      "</template>",
      "<script lang='ts'>",
      "export default {",
      "  components: {},",
      "  props: {},",
      "  setup(props, context) {}",
      "}",
      "</script>",
      "<style lang='scss' scoped></style>"
    ],
    "description": "Log output to console"
  },
  "v3.2": {
    "prefix": "v3.2",
    "body": [
      "<template>",
      "  <div>${1}</div>",
      "</template>",
      "<script lang='ts' setup></script>",
      "<style lang='scss' scoped></style>",
    ],
    "description": "Log output to console"
  },
  // vue-type
  "imr引入组件": {
    "prefix": "imr",
    "body": [
      "import Apppp from '${1}'",
    ],
    "description": "imr引入组件"
  },
  // vue-type
  "vue-type": {
    "prefix": "imvt",
    "body": [
      "import type { Vue } from 'vue'",
      "${1}"
    ],
    "description": "vue类型"
  },
  // ref
  "ref全家桶": {
    "prefix": "imref",
    "body": [
      "import { ref, isRef, shallowRef, triggerRef, customRef, unref } from 'vue'",
      "let ${1} = ref<string>('')",
    ],
    "description": "ref全家桶"
  },
  "ref类型": {
    "prefix": "imreft",
    "body": [
      "import type { Ref } from 'vue'",
      "${1}"
    ],
    "description": "ref类型"
  },
  // reactive
  "reactive全家桶": {
    "prefix": "imret",
    "body": [
      "import { reactive, isReactive, shallowReactive, readonly, isReadonly } from 'vue'",
      "${1}"
    ],
    "description": "reactive全家桶"
  },
  // toRef
  "to全家桶": {
    "prefix": "imto",
    "body": [
      "import { toRef, toRefs, toRaw } from 'vue'",
      "${1}"
    ],
    "description": "to全家桶"
  },
  // 生命周期
  "生命周期": {
    "prefix": "imon",
    "body": [
      "import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmounton, UnMounted } from 'vue'",
      "${1}"
    ],
    "description": "生命周期"
  },
  // 生命周期keep-alive
  "生命周期keep-alive": {
    "prefix": "imonk",
    "body": [
      "import { onActivated, onDeactivated } from 'vue'",
      "${1}"
    ],
    "description": "生命周期keep-alive"
  },
  // 监听
  "监听": {
    "prefix": "imonk",
    "body": [
      "import { watch, computed, watchEffect } from 'vue'",
      "${1}"
    ],
    "description": "监听"
  },
  // 监听
  "nextTick": {
    "prefix": "imnext",
    "body": [
      "import { nextTick } from 'vue'",
    ],
    "description": "监听"
  },
  // vueRouter
  "vueRouter": {
    "prefix": "imRouter",
    "body": [
      "import { createRouter, useRoute, useRouter } from 'vue-router'",
      "${1}"
    ],
    "description": "路由"
  },
  // 
  "vueRouter-type": {
    "prefix": "imRt",
    "body": [
      "import type { Router, useRouter } from 'vue-router'",
      "${1}"
    ],
    "description": "路由类型"
  },

  // -------------------------------------js---------------------------------------------
  // 箭头函数
  "箭头函数": {
    "prefix": "rfc",
    "body": [
      "const ${1} = () => {}",
    ],
    "description": "箭头函数"
  },
  // 函数
  "函数": {
    "prefix": "func",
    "body": [
      "function ${1}{}",
      "${2}"
    ],
    "description": "函数"
  },
  // Promise全部方法
  "Promise": {
    "prefix": "Pro",
    "body": [
    "new Promise((resolve,reject)=>{",
    "     // resolve(true)   // pending 改成成功状态=> fulfilled ",
    "     // reject(false)   // pending 改成失败状态=> rejected",
    "     // thorw '出问题'   // pending 改成失败状态=> rejected",
    "   ${1}",
    "})",
    "Promise.all([promise1,promise2,promise3])",
    "Promise.race([promise1,promise2,promise3])",
    "Promise.any([promise1,promise2,promise3])",
    "Promise.allSettled([promise1,promise2,promise3])",
    "Promise.resolve('成功')",
    "Promise.reject('失败')",
    "// const f = () => console.log('now');",
    "// Promise.try(f)",
    ],
    "description": "Promise全部方法"
  },
  "Print to console": {
		"prefix": "clg",
		"body": [
			"console.log($1)"
		],
		"description": "Log output to console"
	},
  
  // 多行注释
  "create Annotation": {
		"prefix": "/*",
		"body": [
			"/**",
			"* @Description",
			"* @author SHUF",
			"* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
		    "*/"
		],
		"description": "创建注释"
	},
  

}




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值