VS-Code設置文件的自定義模板

時間 2021-01-30

標籤 html vue app spa 3d code htm blog 欄目 HTML 简体版

原文原文鏈接

已知：在VS-Code中，新建html文件後，輸入感嘆號!後按下Enter或者Tab鍵能夠快速生成默認的HTMl內容。

　　

添加自定義的文件模板

　　　　1.文件-》首選項-》用戶片斷　　

　　

　　　　2.在彈出的選項裏選擇新代碼片斷。（也可選擇爲指定文件夾設置模板）

　　　　3.鍵入新代碼片斷的名稱

　　　　　　

　　　　4.編輯代碼模板

{

"vue simple template": {

"scope": "html",

"prefix": "vh",

"body": [

"<!DOCTYPE html>",

"<html lang=\"en\">",

"<head>",

" <meta charset=\"UTF-8\">",

" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

"<title>Hello Vue</title>",

"</head>",

"",

"<body>",

"<div id=\"app\">{{msg}}",

" $0", //定義最終光標的停留位置

"</div>",

"",

" <script src=\"/vue.js\"></script>",

" <script>",

" const vm = new Vue({",

" el: \"#app\",",

" data: {",

" msg: \"你好\"",

" }",

" $1", //tab跳轉位置1

" });",

" </script>",

"</body>",

"",

"</html>"

],

"description": "vue template"

}

}

- scope: 設置模板適用文件類型，爲空時適用全部文件。
- perfix: 即你要使用模板時須要輸入的內容。用於觸發模板
- body: 定義模板內容。
  - 每行都要用雙引號包圍。每行結束後加逗號。
  - 行內符號等要用轉義字符寫。 \" , \n, \t等
  - 空格可被識別。
- $1,$2: 用於tab定位。
- $final: 最終光標的定位
- description：對該模板代碼的描述。

　　效果：html

　　

相關文章

相關標籤/搜索

自定義控件

無配置文件設置

Android-自定義控件

網站建設指南

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<