How to set my markdown snippet?

Ken Chen
3 min readDec 16, 2018

--

picture from Markdown Preview Enhanced

Snippet 是英文中「斷片」的意思,本意是讓一些常用到的程式碼片段,例如 for loop 之類的,能直接套用,節省工程師重複 typing 的時間。同樣用最簡單的 for loop 來舉例,當我們要寫 for 時,通常會長這樣子

其中 for 跟後面的變數名稱、括號等等,幾乎不太會變動,變動的是 for loop 的內容或 condition。像這類有相同模式的程式碼就稱為 snippet。

那麼,如何在 VSCode 中使用 snippet 呢?根據官方說明,各個語言的 extensions已經有內建 snippet,只要輸入對應的 prefix,就會自動列出對應的 snippet。例如,當我們在 .c 中輸入 for 時,會出現

有時候我們因為特殊需求,希望自訂 snippet。VSCode 有支援這類應用,只要打開 PreferencesUser Snippets,就能利用 json 格式定義 snippet,底下是個自訂的 for loop 範例

同樣的,完成 custom snippet 後,我們試著輸入定義的 prefix for,觀察效果

VSCode 有個問題是,當文件格式為 markdown 時,snippet 不會自動出現。如果需要在 markdown 嵌入程式碼,只能老老實實輸入。原本以為是 extension 覆蓋掉自訂的 snippet,但查詢後發現,VSCode 預設將 markdown 的 suggestions 關掉,可能因為 markdown 主要是文書處理,開啟 suggestions 的實用性不高?無論如何,知道原因就好辦了,只要在 Settings 中加入

如此就能開啟設定的 snippet。"editor.snippetSuggestions":"top" 的目的是讓 snippet 能顯示在 suggestions 的最上方,方便我們輸入 prefixEnter 自動生成。

最後放張效果圖,用來在 markdown 中插入 bash code segment。

--

--

Ken Chen
Ken Chen

Written by Ken Chen

台北人。現職軟體開發者。主要領域為後端開發。喜歡電影藝術文學,偶爾寫點別的。想看更多的文章,可以到我的個人 Blog https://blog.kenwsc.com

No responses yet