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模版

相关推荐
拾光拾趣录2 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00003 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl4 分钟前
深度剖析Kafka读写机制
前端
FogLetter4 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan5 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan6 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan7 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录7 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee7 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我8 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html