vscode设置templates_Vscode中快速创建自定义代码模板的方法

Vscode中快速创建自定义代码模板

一招鲜，吃遍天，学会了这个在Vscode中快速创建自定义代码模板的教程，我相信创建其它代码模板的方法你也就通个七七八八了。

我就以Vue的创建为例，不过我这个Vue是在HTML中创建的。

初学Vue，我们一般都是在.html文件中引入vue包，然后编写自己的vue代码。

盲目的跟着网上那些教程创建Vue模板是行不通的。

因为我们创建的模板是在.html文件下，所以我们的模板也得是在html.json中来进行编写。

教程如下：

图文并用，理解更清晰到位！

在Vscode中找到设置 -> 用户代码片段，在输入框内输入html，并点击第一个html.json：

初次输入的话，第一个html.json可能会不带.json后缀，不用管，直接点击html进入即可。

我们进入到html.json页面，这里就是我们编写自己模板的地方了：

接下里就是编写我们的模板了，我们的模板需要的大致有以下几项：

1.基本的HTML架构。

2.引入Vue包的script路径。

3.一些基本的Vue代码结构。

模板我已经备好了，模板如下：

"Html5-Vue": {

"prefix": "vue",

"body": [

"",

"\n",

"\t",

"\t

Document",

"\t",

"\n",

"\t

\n",

"\t

"\t\tvar vm = new Vue({",

"\t\t\tel: '#app',",

"\t\t\tdata: {},",

"\t\t\tmethods: {}",

"\t\t});",

"\t",

"\n",

"description": "快速创建在html5编写的vue模板"

}

把上面的这个模板拷贝到html.json中即可，当然路径要变成自己的本机路径，其余的地方如果看着不舒服也可以自行更改。

保存之后，我们创建一个.html文件，输入vue，回车即可自动生成我们需要的模板了。模板示例图：

必要的解释

为了防止大家更改模板时出现不必要的错误，我给大家简单说一下模板中的东西：

不要纠结一开头写的："Html5-Vue"，这只是一个模板名字而已。

"prefix": ""这里规定的是触发模板的关键词，我这里规定触发词为vue。

我们的模板都是在"body":[]中编写的。

每一行模板代码都要用双引号""来包括。

如果双引号包括的代码中间也出现了双引号，那么需要用转义字符\转义。

\n意味着换行，\t是制表符，这两个用于生成时模板的缩进，让生成出来的模板便于阅读。

模板中出现的$1代表着光标，它的位置即光标的默认位置，可以有多个光标：$2,$3,$4等。

"description":""双引号包括的是对模板描述，同时也是你在.html页面输入触发词后，智能提示中出现的对触发词的解释。

千万别把Vscode中html.json文件自带的{}覆盖了，只需覆盖注释部分，或直接写到注释下面即可。

到此这篇关于Vscode中快速创建自定义代码模板的方法的文章就介绍到这了,更多相关Vscode 创建自定义代码模板内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

时间： 2020-08-05

vscode设置templates_Vscode中快速创建自定义代码模板的方法相关推荐

java list初始容量_java中快速创建带初始值的List和Map实例
java中快速创建带初始值的List和Map实例初始化一个List和Map对象并为期加入值的写法如下: List sList = new ArrayList(); sList.add("s ...
Java中如何创建自定义的注解学习笔记（MD版）
概要 Java中如何创建自定义的注解学习笔记(MD版). 博客博客地址:IT老兵驿站. 前言记得这篇笔记还是在泉州的龙玲酒店记录的,是一个周六的晚上,坐飞机从上海到泉州,从笔记中能勾起一些旅游的回 ...
【Microsoft Azure 的1024种玩法】四十五.在Azure中快速创建Azure AD Domain Services
[简介] Azure Active Directory (Azure AD) 是一种基于云的标识和访问管理服务. Azure Active Directory 可帮助相关企业访问内部资源,例如企业 I ...
在dw中新建html快捷键,Dreamweaver创建自定义快捷键的方法技巧
Dreamweaver创建自定义快捷键的方法技巧快捷键在网页开发中能大幅度地提高工作效率,Dreamweaver CS5 本身已经提供了很多快捷键,但是有些命令是没有快捷键的,这个时候就可以自己自定 ...
转：MSDN Visual系列：MOSS企业级搜索之一——在搜索中心里创建自定义搜索页面和标签选项卡...
MSDN Visual系列:MOSS企业级搜索之一--在搜索中心里创建自定义搜索页面和标签选项卡原文:http://msdn2.microsoft.com/en-us/library/bb42885 ...
利用AxhubCharts元件库在Axure RP中快速创建可视化统计图
利用AxhubCharts元件库在Axure RP中快速创建可视化统计图,可创建的可视化统计图有折线图.柱状图.堆叠柱状图.条形图.堆叠条形图.面积图.饼图.环形图.漏斗图.甘特图.散点图等.具体操作 ...
axure pr动态可视化元件库在哪有_在Axure RP中快速创建可视化统计图，加载图表元件库 Axhub Charts...
Axhub Charts是基于Echarts和Antv的图表元件库,主要是应用在Axure原型设计下载 Axhub Charts 元件库rplib文件 : 点击下载使用Axhub Charts元件库 ...
java中怎么快速导入一个包_Eclipse中快速导入jar包的方法
如何在Eclipse中快速导入jar包呢?下面就一起来学习Eclipse中快速导入jar包的方法吧,熟悉一下它的基本操作, 相信对各位小伙伴们一定会有所帮助的哦. Eclipse中快速导入jar包的方 ...
JS 创建自定义对象的方法
工厂模式优点:接受参数,可以无数次的调用这个函数,创建Person对象,而每次他都可以返回一个包含三个属性一个方法的对象. 缺点:虽然解决了创建多个相似对象的问题,但是没有解决对象识别的问题(即怎么 ...

vscode设置templates_Vscode中快速创建自定义代码模板的方法

vscode设置templates_Vscode中快速创建自定义代码模板的方法相关推荐

最新文章

热门文章