vscode配置代码片段生成快捷键

一开始还以为是装个插件的事,没想到是自己定义的快捷键。

以vue3代码片段为例

在vscode左下角点击红框处

选择新建全局代码片段文件

输入快捷键名称 vue3(可以自定义),以.json结尾,回车

在打开的文件里编写需要的代码片段,保存。

模板代码示例如下,可以自行修改

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

新建vue组件,输入vue3,会有提示,选中后回车,即可生成刚才设置的代码片段。

相关推荐
时光之源10 小时前
使用ssh用Cursor/TRAE/VSCode链接远程服务器并运行可视化程序,显示在本地机器上,全流程教学!
ide·vscode·编辑器
神の愛11 小时前
VSCode报错了??
ide·vscode·编辑器
BackCatK Chen11 小时前
Python安装与VSCode配置完整教程(每步带截图说明)
vscode·python·python安装·vscode配置·python 3.9.10·嵌入式环境配置
莫物12 小时前
vue过滤表格数据导致的索引错乱问题
前端·javascript·vue.js
Можно13 小时前
Vue 组件样式隔离完全指南:从原理到实战
前端·javascript·vue.js
huabiangaozhi13 小时前
vscode配置django环境并创建django项目(全图文操作)
vscode·django·sqlite
英俊潇洒美少年13 小时前
Vue3 完整渲染流程(从 createApp → mount → update → unmount)
前端·javascript·vue.js
前端Hardy13 小时前
Pinia 比 Vuex 好用 10 倍?Vue3 状态管理终于不折磨人了!(新手复制即用)
前端·javascript·vue.js
前端Hardy14 小时前
Vue3 的 v-model 双向绑定,90% 的人都用错了?(附 2026 最新避坑指南)
前端·javascript·vue.js
前端Hardy14 小时前
救命!Vue3 的 Composition API,居然能让我少写 80% 冗余代码?(新手也能直接抄)
前端·javascript·vue.js