Visual Studio Code Snippet and Tab Completion

分享如何增添 Visual Studio Code 的 Snappit 功能與開啟 Tab Completion 加速完成文件編輯

現代的編輯器大多有支援 snippet 功能,當然 VSCode 也不意外得具備這樣的功能,這次介紹如何透過 VSCode 的 Tab Completion 來加強 snippet 的使用

Insert Existed Snippet

要在當前檔案插入已經建立的 Snippet ,可於 Command Palette 輸入 insert snippet ,VSCode 就會針對你的副檔名(file extension) 開啟對應的 Snippet 清單,下方示範 .md 檔案的 snippet 該如何插入:


Create New Snippet

眼尖的朋友會發現我們上面的示範所插入的是一個 md-iframe 的 snippet,這是一個客製的 snippet,專門負責在 內嵌入其他網頁,例如:youtube 影片.

而要新增一個 snippet 我們一樣要透過 Command Palette 輸入 Preferences: Open User Snippets ,接者選擇你的副檔名格式後就會開啟該語言的設定,此範例選則 markdown


	// Place your snippets for Markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
		"description": "Log output to console"
	"snippet-md-iframe": {
		"prefix": "md-iframe",
		"body": "<iframe width='560' height='315' src='$0' frameborder='0' allowfullscreen></iframe>",
		"description": "md-iframe"

這邊要稍微解說一下裡面有一個 $0 的用意是讓我們再插入 snippet 之後,當前的滑鼠指標就會移到該區塊,我們就可以接著輸入網址,不用滑鼠再點選一次位置.

Enable editor.tabCompletion

這邊我們可以搭配開啟 editor.tabCompletion 這個功能,可以幫我們透過 tab 的方式直接插入對應的 snippet.開啟該設定的方式如下:


而當我們開啟該設定後就可以透過 tab 的方式幫我們快速插入:


[補充] Snippet Generator

如果你除了VSCode 之外還有用其他編輯器,如 Sublime TextAtom 也想建立一樣的 snippet 指令,可以參考Snippet Generator 一次幫你產生三個不同版本的 Snippet ,我們只要複製貼上就好.



作者: Blackie
版權聲明: 本站所有文章除特別聲明外,均採用 CC BY 4.0 許可協議。轉載請註明來源 Blackie !