VSCode自定义快捷键生成Vue实例模板——附模板代码

最新推荐文章于 2023-02-17 13:53:28 发布

Microbabyshine

最新推荐文章于 2023-02-17 13:53:28 发布

阅读量3.7k

点赞数 6

分类专栏：前端知识点小记文章标签： vue visual studio code tab

本文链接：https://blog.csdn.net/qq_32755875/article/details/105844443

版权

前端知识点小记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

vscode中，在一个空白的页面中通过vh快捷键生成一个vue模板

效果如下：

下面就演示一下是如何实现的

打开VScode→文件→首选项→用户代码片段
点进去之后，选择html.json
将红框部分的注释解开
修改prefix的值，和description部分的描述
将你自定义的模板代码贴入到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:
	"vh": {
		"prefix": "vh",  //触发的关键字 输入vh按tab键
		"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>",
      "    <!-- 导入 vue 文件 -->",
      "    <script src=\"./lib/vue-2.5.22.js\"></script>",
      "    <script src=\"./lib/vue-router_3.0.2.js\"></script>",
      "  </head>",
      "",
      "  <body>",
      "    <!-- 被 vm 实例所控制的区域 -->",
      "    <div id=\"app\"></div>",
      "",
      "    <script>",
      "      //创建 vm 实例对象",
      "      const vm = new Vue({",
      "        //指定控制的区域",
      "        el:'#app',",
      "        data:{},",
      "       });",
      "    </script>",
      "  </body>",
      "</html>",
		],
		"description": "vh components"
	}
}

然后就可以新建一个空白html文件，输入vh，按下tab会自动补全你设置的代码段啦！

Microbabyshine

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
VSCode自定义快捷键生成Vue实例模板——附模板代码

vscode中，在一个空白的页面中通过vh快捷键生成一个vue模板效果如下：下面就演示一下是如何实现的打开VScode→文件→首选项→用户代码片段点进去之后，选择html.json将红框部分的注释解开修改prefix的值，和description部分的描述将你自定义的模板代码贴入到body中，这里注意，每一行都是用双引号引起来的，每一行行末要用逗号（,）隔开，如图。整...
复制链接

扫一扫