Visual Studio Code (vscode)自定義HTML頁面自動生成格式


學習Vue時新建每一個HTML文件時都要手動引入一次Vue.js,太麻煩,本人又很懶
所以寫了自定義HTML頁面生成的格式,自動生成的HTML頁面格式代碼里就自帶Vue.js的引入。

過程如下:

工具欄 > 文件 > 首選項 > 用戶代碼片段

在上方彈出的搜索框中輸入html.json 回車 打開html.json 文件

json文件長這樣:

在json文件中填寫配置代碼,即可自定義HTML文件格式。

print to 后面填的是你這個代碼塊的名字 隨便取 符合命名規則就行

prefix 冒號里填的是 在 Intellisense 中選擇代碼片段時將使用的前綴,即你要打出的快捷鍵

body 冒號后面填的是你要定義的代碼段的完整代碼

美元$符號+數字代表光標位置 即你打出代碼段后光標所在的位置

description 冒號后面填的是 這個代碼段的描述 隨便寫就行

注:引號后面的是空格 不能直接按tab。在HTML頁面中輸入hm即可生成
代碼如下:

"Print out HTMLMoudules":{
	"prefix": "hm",
	"body": [
		"<!DOCTYPE html>",
		"<html lang=\"cn\">",
		"<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\">",
		"   <script src=\"https://cdn.bootcss.com/vue/2.6.10/vue.js\"></script>",
		"   <title>Document</title>",
		"</head>",
		"<body>$3",
		"   ",
		"</body>",
		"</html>"
	],
	"description": "生成帶Vue的HTML模板"
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM