vue3模板-vscode设置（语法糖）

选择菜单里的 文件 > 首选项 > 用户代码片段
vscode模板

{"Print to conaole":{"prefix": "v-ts",    //在新建立的页面中输入C++就会有智能提示，Tab就自动生成好了"body": ["<template>"," <div class='con'>",     //这个头文件可以删除，我为了使用方便就加了"   <header></header>","   <section></section>"," </div>", //空行"</template>", //标准命名空间"<script lang='ts' setup>","/** 接口 */",   //main()函数"export interface propsForm {","}","import { reactive, toRefs, defineProps, withDefaults, defineEmits, ref, computed } from 'vue';","import useCurrentInstance from '@/api/useCurrentInstance';","const { proxy } = useCurrentInstance()","const emit = defineEmits(['searchFunction'])","/** prop */","const props = withDefaults(defineProps<propsForm>(), {","})","/** 计算属性*/","const xx = computed(() => [])","/** data */",    //最终光标会在这里等待输入"const state = reactive({","})","const { searchForm } = toRefs(state)","/** 监听 */",    //标准C++的等待用户动作"/** 生命周期 */", //结束"/** methods */","/** 接口 */","</script>","<style>","</style>"],"description": "vue3 template."   //用户输入后智能提示的内容（你可以用中文写“生成C++模板”）}
}

结果

<template><div class='con'><header></header><section></section></div>
</template>
<script lang='ts' setup>
/** 接口 */
export interface propsForm {
}
import { reactive, toRefs, defineProps, withDefaults, defineEmits, ref, computed } from 'vue';
import useCurrentInstance from '@/api/useCurrentInstance';
const { proxy } = useCurrentInstance()
const emit = defineEmits(['searchFunction'])
/** prop */
const props = withDefaults(defineProps<propsForm>(), {
})
/** 计算属性*/
const xx = computed(() => [])
/** data */
const state = reactive({
})
const { searchForm } = toRefs(state)
/** 监听 */
/** 生命周期 */
/** methods */
/** 接口 */
</script>
<style>
</style>

useCurrentInstance.ts

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function useCurrentInstance() {const { appContext } = getCurrentInstance() as ComponentInternalInstanceconst proxy = appContext.config.globalPropertiesreturn {proxy}
}