將常用 Component 設定為 HTML Snippet

關於 HTML 部分,VS Code 已經內建一些 Snippet,也支援 Emmet,我們是否還能建立自己的 HTML Snippet 呢 ?

Version


VS Code 1.33.1

VS Code !


html000

VS Code 內建的 !,每次所建立的 HTML snippet 如上圖所示,它還考慮了 RWD 與 Edge,若你想要更精簡的 HTML,就必須自行建立 user snippet。

User Snippet


html003

希望輸入 html5 後,會自動提示 Default HTML 5 Snippet 提示。

html004

按下 return 後,cursor 會自動停在 <title></title> 之間,方便我們直接輸入 HTML 的 title。

html005

輸入完 title 按下 tab 後,會自動跳到 <body></body> 之間。

html006

輸入完 body 部分,按下 tab 後,會自動跳到 <style></style> 之間。

Preference


html001

Code -> Preferences -> User Snippets

html002

輸入 html,選擇 html.json

html.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"default HTML 5 Snippet": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
" <meta charset=\"UTF-8\">",
" <title>$1</title>",
" <style>",
" $3",
" </style>",
"</head>",
"<body>",
" $2",
"</body>",
"</html>"
],

"description": "Default HTML 5 Snippet"
}

}

html.json 為 HTML user snippet 設定檔,顧名思義是 JSON 格式。

第 2行

1
"default HTML 5 Snippet": {

User snippet 的 key,必須唯一,並不是提示所用。

第 3 行

1
"prefix": "html5",

prefix 為你實際要在 VS Code 輸入的 縮寫

第 4行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
" <meta charset=\"UTF-8\">",
" <title>$1</title>",
" <style>",
" $3",
" </style>",
"</head>",
"<body>",
" $2",
"</body>",
"</html>"
],

HTML snippet 要放在 body 底下,是 array,每一行用以 string 表示,若遇到 " 要以 \ 加以 escape。

其中 $1 為第一個 cursor 的 stop 點,按下 tab 會停到 $2,以此類推。

19 行

html007

19 行

1
"description": "Default HTML 5 Snippet"

description 才是設定輸入 html5 時所顯示的提示。

Conclusion

  • 可將常用的 HTML component 設定為自己的 HTML snippet,可大幅增加開發效率

Reference

VS Code, Creating your own snippets

2019-04-15