更友好的管理VSCODE代碼片段

寫在前面

對於我這種嚴格依賴 VSCODE 的人來講，會更努力的尋找釋放生產力的方式，而代碼片段是我平常最經常使用的功能之一。

從官網的 Creating your own snippets 能夠很是容易的構建本身代碼片段庫。然而維護一個須要保持特定代碼格式的JSON文件是一件很是困難的事，特別是對於像我這種三天頭可能就產生一個新的片段來講是一種噩夢。

Markdown

我想99%的程序員都離不開 Markdown，若是說將一個 Markdown 文件內容直接轉換成一個代碼片段應該來講是很優雅的形式，例如：

這是一個按鈕

｀｀｀html　（注意 ｀ 應該是英文）
<button type="${1|text,tel,email|}">$0</button>
｀｀｀

與之相對應的智能提醒像這樣：

維護一些 Markdown 文件比維護一個JSON文件更酸爽。

vscode-snippet-generator

vscode-snippet-generator 能夠快速作到這一點，並且很是簡單。

快速入門

• 克隆一個管理 Markdown 文件的模板項目：

  git clone --depth 1 https://github.com/cipchk/vscode-snippet-generator-tpl.git

• 在項目 src 目錄下建立一個 button.md，內容爲上述。

• 生成一個 VSCODE 插件安裝包：

  npm run release

而後將這個 VSCODE 插件分享給團隊其餘成員，僅此而已。

cipchk-vscode 是我我的一個代碼片段庫，也是使用 vscode-snippet-generator 構建。

市場

若是你但願給你的開源項目提供一些片段，只須要將 package.json 相關信息變動爲本身項目名稱便可，最後能夠將生成插件提交給VSCODE市場。

參數

vscode-snippet-generator 是一個命令行工具，它提供一些若干參數，這些參數你能夠在命令行中指定，或在根目錄建立一個名爲 snippet-config.json 配置信息。

• sourceRoot 指定 Markdown 文件根目錄，默認：src
• outFile 指定 JSON 輸出路徑，默認：./snippets.json
• prefix 指定前綴
• separator 指定多層級目前間用什麼分隔符，默認：-

每個代碼片段觸發是由 prefix 決定，而生成 prefix 的規則默認是根據目錄及文件名結構，例如：

src
  button
    type.md => button-type，如有前綴：as-button-type
    full.md => button-full，如有前綴：as-button-full

固然若是你願意也能夠經過一段 YAML 語法的頭部文原本標記源文件，例如：

---
prefix: button
description: 按鈕
scope: typescript,html
---

更多風格示例，請參考 examples 目錄。

（完）