[开发工具] vscode添加用户自定义的vue代码模板

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发工具 -> vscode添加用户自定义的vue代码模板 -> 正文阅读

[开发工具]vscode添加用户自定义的vue代码模板

在vscode中添加自定义的vue代码模版：
1.点击vscode左下角的齿轮图标—点击用户代码片段(或者通过菜单栏文件–首选项–用户代码片段打开)

2.选择新建全局代码片段文件并起好名字（后来要通过名字调用模板，v1是我之前自定义的代码片段）
在这里插入图片描述
3.在大括号中插入如下代码：
其中每一行都要放在"",双引号里，原来的双引号改为单引号，这里的缩进使用Tab会报错，于是我是用空格敲的，暂时不知道原因。

"Print to console": {        
		"prefix": "v1",        
		"body": [          
			"<!DOCTYPE html>",          
			"   <html>",          
			"      <head>",          
			"         <meta charset='UTF-8'/>",
			"         <title>$0</title>",
			"         <!--引入Vue-->",
			"         <script type ='text/javascript' src='../js/vue.js'></script>",
			"      </head>",
			"      <body>",
			"         <!--准备好一个容器-->",
			"         <div id='root'>",
			"          ",
			"         </div>",
			"      </body>",
			"      <script type = 'text/javascript'>",
			"         Vue.config.productionTip = false  //阻止Vue在启动时生成生产提示",
			"          ",
			"      </script>",
			"   </html>",
	  ],
	  "description": "Log output to console"
   }