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 分钟前
ant-design4.xx实现数字输入框; 某些输入法数字需要连续输入两次才显示
前端·javascript·anti-design-vue
程序员-小李3 分钟前
VuePress完美整合Toast消息提示
前端·javascript·vue.js
科文小白狼33 分钟前
Linux下VSCode开发环境配置(LSP)
linux·vscode·里氏替换原则·lsp
Uyker1 小时前
从零开始制作小程序简单概述
前端·微信小程序·小程序
EndingCoder5 小时前
React从基础入门到高级实战:React 实战项目 - 项目三:实时聊天应用
前端·react.js·架构·前端框架
阿阳微客6 小时前
Steam 搬砖项目深度拆解:从抵触到真香的转型之路
前端·笔记·学习·游戏
德育处主任Pro7 小时前
『React』Fragment的用法及简写形式
前端·javascript·react.js
CodeBlossom7 小时前
javaweb -html -CSS
前端·javascript·html
打小就很皮...8 小时前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序
集成显卡9 小时前
PlayWright | 初识微软出品的 WEB 应用自动化测试框架
前端·chrome·测试工具·microsoft·自动化·edge浏览器