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": [ "<!DOCTYPE html>", "<html lang=\"zh-CN\">", "\t<head>", "\t\t<meta charset=\"utf-8\">", "\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">", "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">", "\t\t<meta name=\"author\" content=\"作者名字\">", "\t\t<title>$1</title>", "\t\t<link href=\"css/bootstrap.min.css\" rel=\"stylesheet\">", "\t\t<style>", "\t\t\t", "\t\t</style>", "\t</head>", "\t<body>", "\t\t$2", "\t\t<script src=\"js/jquery.min.js\"></script>", "\t\t<script src=\"js/bootstrap.min.js\"></script>", "\t</body>", "</html>" ], "description": "Bootstrap文檔基本結構" }
應用場景：
4、sublime 自定義html模板
sublime的自定義html模板跟vscode用法是幾乎一樣的，這邊不做詳解，還是粗略介紹使用
首先，要找到 snippets.json這個文件所在的目錄，路徑是preferences>browse packages，看看有沒有emmet目錄。如果沒有，可能是您沒有安裝emmet插件，這時候您需要手動安裝。
然后，打開 snippets.json這個文件，開始自定義模板，快捷鍵打開即可。