VSCode创建自定义代码段自动新建Vue实例

最新推荐文章于 2025-04-08 14:04:07 发布

知识的芬芳和温柔的力量全都拥有的小王同学

最新推荐文章于 2025-04-08 14:04:07 发布

阅读量597

点赞数 4

分类专栏：前端随笔 debug 文章标签： vscode vue snippets

本文链接：https://blog.youkuaiyun.com/tensixchuan/article/details/120451873

版权

前端同时被 3 个专栏收录

14 篇文章

订阅专栏

debug

6 篇文章

订阅专栏

随笔

3 篇文章

订阅专栏

VSCode中有一些自带的自动代码，比如输入！然后Tab或者Enter会自动创建html代码
在这里插入图片描述
那么如何像这样很方便地创建自定义的自动代码段呢，本文以新建Vue实例代码段为例进行介绍。

1. 按F1，然后输入snippets

2. 选择编辑现有的全局代码片段，也可以新建全局代码片段

3. 输入命名，然后就会打开或者新建该自定义.code-snippets代码设置文件，可以直接复制粘贴


	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"New a html with vue": {
		"prefix": "vh", //输入的提示关键词
		"body": [ //引用的代码段，每一行是一个字符串，用逗号隔开
			"<!DOCTYPE html>",
			"<html lang=\"en\">",

			"<head>",
    			"\t<meta charset=\"UTF-8\">",
    			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
    			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    			"\t<title>Document</title>",
    			"\t<script src=\"./lib/vue.js\"></script>",
			"</head>",
			"",
			"<body>",
    			"\t<div id=\"app\"></div>",
				"\t",
    			"\t<script>",
				"\t\t//创建Vue实例，得到ViewModel",
        			"\t\tvar vm = new Vue({",
            			"\t\t\tel: \"#app\",",
            			"\t\t\tdata: {},",
            			"\t\t\tmethods: {}",
        			"\t\t});",
    			"\t</script>",
				"\t",
			"</body>",
			"",
			"</html>"
		],
		"description": "New a html with vue"
	}
}