使用VSCode快速生成用户自定义代码段

倾然丶 夕夏残阳落幕 提交于 2020-01-15 01:09:59

使用VSCode快速生成用户自定义代码片段

开始使用VScode,以下记录快捷生成VUE文件模板的做法。

第一步: 文件 >> 首选项 >>用户代码片段
在这里插入图片描述
新建一个全局用户代码段
在这里插入图片描述

将以下代码覆盖

{
	"vue": {                
		"prefix": "vue",           //输入vue生成模板       
		 "body": [
		 	"<!DOCTYPE html>",            
		 	"<html lang=\"en\">",            
		 	"",            
		 	"<head>",            
		 	"   <meta charset=\"UTF-8\">",            
		 	"   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",            
		 	"   <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		 	"    <title>Document</title>",            
		 	"   <script src=\"./lib/vue-2.4.0.js\"></script>",            
		 	"</head>",            
		 	"",            
		 	"<body>",
		 	"    <div id=\"app\"></div>",            
		 	"",            
		 	"",            
		 	"   <script>",            
		 	"       // 创建 Vue 实例,得到 ViewModel",            
		 	"       var vm = new Vue({",            
		 	"           el: '#app',",            
		 	"           data: {},",            
		 	"           methods: {}",            
		 	"       });",            
		 	"   </script>",            
		 	"</body>",            
		 	"",            
		 	"</html> ",
		],        
		"description": "vue output to console"    
	}
}

保存并新建一个html文件,输入vue按下tab键。自动生成。
在这里插入图片描述
完成

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!