vscode用快捷键一键生成vue模板

项目中有些代码模块是固定的,如下面的代码所示,为了不重复写这些相同的代码,我们可以使用快键键一键生成模板。

流程:

中文:首选项-> 用户代码片段 -> 输入框中输入vue,找到vue.json文件(没有vue.json,选vue也可)-> 定义所需的代码段

英文:Preferences->Configure Snippets-> 输入框中输入vue,找到vue.json文件(没有vue.json,选vue也可)-> 定义所需的代码段

定义代码段:

定义了两段代码模版,vue3,vue32

其中1,2,3是鼠标焦点位置,点击tab可以切换到2,$3的位置。

javascript 复制代码
{
	"vue3 template": {
		"prefix": "vue3", //键入该值,按tab快捷产生
		"body": [
			"<script setup lang=\"ts\">",
			"$3",
			"</script>",
			"",
			"<template>",
			"  $1",
			"</template>",
			"",
			"<style scoped lang=\"scss\">",
			"$2",
			"</style>",
		],
		"description": "Log output to vue3 template"
	},

	"vue3 template2": {
		"prefix": "vue32", //键入该值,按tab快捷产生
		"body": [
			"<script setup lang=\"ts\">",
			"$3",
			"console.log('');",
			"</script>",
			"",
			"<template>",
			"  $1",
			"</template>",
			"",
			"<style scoped lang=\"scss\">",
			"$2",
			"</style>",
		],
		"description": "Log output to vue3 template2"
	},
}

在vue文件中输入vue3,vue32,回车即可

生成vue3模版

生成vue32模版

相关推荐
aklry5 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9312 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子13 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982413 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug16 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo16 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
悠悠小茉莉27 分钟前
Win11 安装 Visual Studio(保姆教程 - 更新至2025.07)
c++·ide·vscode·python·visualstudio·visual studio
撰卢40 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler2811 小时前
解决setTimeout/setInterval计时不准确问题的方案
前端