【VSCode】文件模板创建及使用.md

背景

最近使用VSCode学习Vue项目比较频繁,每次创建Vue文件都要手动写重复代码,特别麻烦,就上网查找自动生成代码的说明,结果发现VSCode有代码模板,怪怪,感觉发现新大陆了(low!)。

配置

  1. 打开配置

    • 方式一 :首先打开File->Preferences->Configure User Snippets配置(文件->首选项->配置用户片段):
    • 方式二 :或通过快捷键Ctrl+Shift+P打开命令面板,输入snippets,选择Configure User Snippets
  2. 然后选择需要配置模板的对应文件类型(以vue模板为例,选择vue.json,其他模板同理为类型.json),如:

  3. 配置自定义代码模板:

    • "Print to console" 代码模板内容
    • "prefix" 代码模板前缀,在对应类型中使用该前缀可触发根据代码模板生成代码
    • "body" 代码模板数据,实际是字符串数组
    • $1,$2,$3 代码模板变量,根据变量顺序从1开始,$0为最后一个变量,会在代码生成后输入,根据次序代表变量顺序
    • ${1:default} 代码模板变量默认值,当不输入时以默认值显示,否则显示输入值
json 复制代码
{
    {
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
    "Print to console":{
		"prefix": "vue",
		"body": [
			"<template>",
			"	<div class='${1:home}'></div>",
			"</template>",
			"<script>",
			"export default {",
			"	name: '${2:Home}',",
			"	data() {",
			"		return {",
			"		}",
			"	},",
			"	methods: {},",
			"};",
			"</script>",
		]
	}
}

使用

  1. 配置完成后,在VSCode中输入模板名称,按tab键即可生成模板代码,如下图所示:

相关推荐
lucky九年35 分钟前
vscode翻译插件
ide·vscode·编辑器
真·Wild·攻城狮2 小时前
【码农日常】Vscode Clangd初始化失败(Win10)
ide·vscode·编辑器
小堇不是码农2 小时前
在VScode中配置C_C++环境
c语言·c++·vscode
七灵微2 小时前
【测试】【Debug】vscode中同一个测试用例出现重复
ide·vscode·编辑器
哇咔咔哇咔15 小时前
使用Markdown编写适用于GitHub的README.md文件的目录结构
vscode·markdown
羊小猪~~20 小时前
神经网络基础--什么是神经网络?? 常用激活函数是什么???
人工智能·vscode·深度学习·神经网络·机器学习
Eiceblue21 小时前
Python 在PDF中绘制形状(线条、矩形、椭圆形等)
vscode·python·pycharm·pdf
tekin1 天前
vscode php Launch built-in server and debug, PHP内置服务xdebug调试,自定义启动参数配置使用示例
ide·vscode·php·launch.json·runtimeargs·php内置服务自定义参数
曹申阳2 天前
vscode 创建 vue 项目时,配置文件为什么收缩到一起展示了?
ide·vue.js·vscode
丶Darling.2 天前
vscode在windows和linux如何使用cmake构建项目并make生成可执行文件,两者有什么区别
linux·windows·vscode