Visual Studio Code Snippet and Tab Completion

Posted on   |   In   |     |  

分享如何增添 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 該如何插入:

Insert

Create New Snippet

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

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

markdown.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
/*
	// 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": [
			"console.log('$1');",
			"$2"
		],
		"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．開啟該設定的方式如下：

setup

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

vscode_tab_demo

[補充] Snippet Generator

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

snippet-generator

References