初学Vue，VSCode快速生成代码块2_vscode如何快速生成vm代码

作者：很楠不爱3 | 2024-03-23 08:13:28

踩

vscode如何快速生成vm代码

上个文章已经讲了快速生成代码块的原理，但是随着学习的深入，前一个代码块已经不能满足我们的需求，因此，我们可以编写一个更加方便的代码块：

首先还是找到设置中的用户代码片段：

然后搜索html，进入html.json文件：

html.json基本内容与javascript.json中相同，这次选择html.json的原因是，这次我想创建的快速代码片段不是在<script></script>中书写的，而是创建了.html文件之后就可以立即使用的。

为什么要创建这样一个快速代码块呢？每当我们创建.html文件后使用"!"来生成代码，都只能生成部分代码，我们还需要改标题、引入vue.js文件、创建容器、创建Vue实例，一系列工作完成之后才能接着写代码，既然可以编写属于自己的快速生成的快捷方式，并且以上流程前期学习时使用过于频繁，何乐而不为呢？


{
	// Place your snippets for html 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 html-vue": {
		"prefix": "html-vue",
		"body": [
			"<!DOCTYPE html>",
			"<html lang='en'>",
			"<head>",
			"    <meta charset='UTF-8'>",
			"    <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
			"    <title>$1</title>",
			"    <script src='$2'></script>",
			"</head>",
			"<body>",
			"    <div id='app'>",
			"        $3",
			"    </div>",
			"    <script>",
			"        const vm = new Vue({",
			"            el : '#app',",
			"            data : {",
			"                $4",
			"            },",
			"            methods : {",
			"                $5",
			"            },",
			"            computed : {",
			"                $6",
			"            },",
			"            watch : {",
			"                $7",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"</html>"
		]
	}
}

有了以上的准备，当创建一个.html文件时，不必再使用"!"来生成，然后慢慢改，直接敲击"html-vue"就可以生成大量代码，并且通过光标定位使用tab键可以快速填充动态的内容。

注：上述代码块中，vm中有很多配置项，即使不用放着也不会报错，全部生成也无伤大雅。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/294079