前端自定义html组件,前端编辑器-自定义html模板

1、webstorm 自定义html模板

我们需要找到设置创建模板的地方,步骤如下:

File  ->  settings ->  Editor  ->  File and Code Templates

找到这个位置,我们就会看见这个界面,在导航栏的右侧部分的左上角有个+号我们就可以开始创建模板了,

如上图所示,Name所对应的地方是用来写HTML模板的名字, 这会方便我们选择的是哪一个模板, Extension是我们我们的模板是什么类型的文档,此地理所应当是填html, 空白区域是放html模板代码,把你写好的代码复制黏贴上去,再点击应用提交即完成创建.

应用场景：

2、Hbuilder 自定义html模板

hb的模板创建相对其他编辑器是来说是非常暴力直接的，接下来不我来告诉大家是怎样个暴力法。

Hbuilder有个放置自定义模板的文件夹，只要你把html模板文档放到这个文件夹里面就OK了，是不是非常简单？

那么，我们也得知道这个文加大在哪呀！我这也给大家写了个具体的步骤：

1、跟平时创建html的一样，弹出创建html窗口

2、在这个窗口有个选择模板模块，右边有自定义模板字样还带下划线，学前端的码友们知道代表着是链接的功能，然后，点击跳转页面

3、说好的页面呢？怎么跳到一页文件夹？ 你在仔细看看，貌似是我们要找的文件夹了。

4、把模板文档放到这个文价夹,这还没完成,在放文档之前先把readme删除之后再把模板文档放到这个文价夹,关闭这个文件夹,等等下次在打开这个文件夹时还会再自动生成一个readme.txt,如果你好奇点击进去，你会把这个文件夹删了的。

应用场景：新建html，选择模板

3、Visual Studio Code 自定义html模板

右上角文件 ->首选项 -> 用户代码片段 ->html.json文件

放html模板代码, 如下

如果需要多个模板，模板代码片段之间用 逗号隔开

模板源码：

"Bootstrap文档基本结构": {

"prefix": "boot",

"body": [

"",

"",

"\t

",

"\t\t",

"\t\t",

"\t\t",

"\t\t",

"\t\t

$1",

"\t\t",

"\t\t

"\t\t\t",

"\t\t",

"\t",

"\t

",

"\t\t$2",

"\t\t",

"\t\t",

"\t",

"