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 ComponentInternalInstance
    const proxy = appContext.config.globalProperties
    return {
        proxy
    }
}
相关推荐
编程乐学38 分钟前
安卓非原创--基于Android Studio 实现的天气预报App
android·ide·android studio·课程设计·大作业·天气预报·安卓大作业
非得登录才能看吗?3 小时前
VScode 入门(设置篇)
ide·vscode·编辑器
Costrict6 小时前
解锁新阵地!CoStrict 现已支持 JetBrains 系列 IDE
大数据·ide·人工智能·深度学习·自然语言处理·ai编程·visual studio
AlphaFinance6 小时前
Windows下Vscode连接到WSL的方法
ide·vscode·编辑器
Dobby_057 小时前
【Go】C++ 转 Go 第(二)天:变量、常量、函数与init函数
vscode·golang·go
空影星15 小时前
Tablecruncher,一款轻量级CSV编辑器
python·编辑器·电脑·智能硬件
开发游戏的老王19 小时前
虚幻引擎入门教程:虚幻编辑器的基本操作
编辑器·游戏引擎·虚幻
techdashen1 天前
圆桌讨论:Coding Agent or AI IDE 的现状和未来发展
ide·人工智能
止观止1 天前
如何开发 VSCode 内置扩展:从零开始构建最简扩展
ide·vscode·编辑器
CHH32131 天前
在 Mac/linux 的 VSCode 中使用Remote-SSH远程连接 Windows
linux·windows·vscode·macos