在VScode中学习Vue框架时，如何快速生成属于自己的代码模板

最新推荐文章于 2024-05-23 19:17:42 发布

谭耀迪

最新推荐文章于 2024-05-23 19:17:42 发布

阅读量633

点赞数 2

分类专栏： Vue 文章标签： vue.js html

本文链接：https://blog.csdn.net/e5132712/article/details/116407013

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在VScode中学习Vue框架时，如何快速生成属于自己的代码模板

我们在初始学习Vue的时候都会用到这样一个快速生成HTML代码的快捷键：！（注意是英文符号）+回车，即可生成以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

那么我们如何生成属于自己的代码片段与定制快捷键呢？
点击“设置”图标——选择“用户代码片段”
在这里插入图片描述
点击html.json

会出现这个界面

然后我们手动编辑你想要的代码
prefix后面是你定义的快捷键
body后面填写的是代码片段
以下为例：

{
	// 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"
	// }

"vue html":{
	
		"prefix": "vh",
		"body":[ 
			"<!DOCTYPE html>",
		"<html lang=\"en\">",
		"<head>",
		"    <meta charset=\"UTF-8\">",
		"    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
		"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
		"    <title>Document</title>",
		"    <script src=\"vue.js\"></script>",
		"</head>",
		"<body>",
		"   <div id=\"app\"></div>",
		
		"    <script>",
		"        var vm = new Vue({",
		"            el:'#app',",
		"            data:{",
						
		"            },",
		"            methods:{",
						
		"            },",
		"        })",
		"    </script>",
			
		"</body>",
		"</html>",
				]
		
	}
}

注意每一行代码都有""包围，并且是逗号结尾。
如上面的代码，我设置的快捷键是vh，只要在文件里输入vh再按回车，即可快速得到代码片段：
在这里插入图片描述
此时按下回车

即可生成自己定制的代码模板。

谭耀迪

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
在VScode中学习Vue框架时，如何快速生成属于自己的代码模板

在VScode中学习Vue框架时，如何快速生成属于自己的代码片段我们在初始学习Vue的时候都会用到这样一个快速生成HTML代码的快捷键：！（注意是英文符号）+回车，即可生成以下代码：下面展示一些内联代码片。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫