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": "创建注释"
},
}