寫在前面

對(duì)于我這種嚴(yán)格依賴 VSCODE 的人來說，會(huì)更努力的尋找釋放生產(chǎn)力的方式，而代碼片斷是我日常最常用的功能之一。

從官網(wǎng)的 Creating your own snippets 可以非常容易的構(gòu)建自己代碼片斷庫。然而維護(hù)一個(gè)需要保持特定代碼格式的JSON文件是一件非常困難的事，特別是對(duì)于像我這種三天頭可能就產(chǎn)生一個(gè)新的片斷來說是一種噩夢(mèng)。

Markdown

我想99%的程序員都離不開 Markdown，如果說將一個(gè) Markdown 文件內(nèi)容直接轉(zhuǎn)換成一個(gè)代碼片斷應(yīng)該來說是很優(yōu)雅的形式，例如：

這是一個(gè)按鈕

｀｀｀html?。ㄗ⒁?｀ 應(yīng)該是英文）
<button type="${1|text,tel,email|}">$0</button>
｀｀｀

與之相對(duì)應(yīng)的智能提醒像這樣：

demo.gif

維護(hù)一些 Markdown 文件比維護(hù)一個(gè)JSON文件更酸爽。

vscode-snippet-generator

vscode-snippet-generator 可以快速做到這一點(diǎn)，而且非常簡(jiǎn)單。

快速入門

• 克隆一個(gè)管理 Markdown 文件的模板項(xiàng)目：

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

• 在項(xiàng)目 src 目錄下創(chuàng)建一個(gè) button.md，內(nèi)容為上述。
• 生成一個(gè) VSCODE 插件安裝包：

  npm run release
  

然后將這個(gè) VSCODE 插件分享給團(tuán)隊(duì)其他成員，僅此而已。

cipchk-vscode 是我個(gè)人一個(gè)代碼片斷庫，也是使用 vscode-snippet-generator 構(gòu)建。

市場(chǎng)

如果你希望給你的開源項(xiàng)目提供一些片斷，只需要將 package.json 相關(guān)信息變更為自己項(xiàng)目名稱即可，最后可以將生成插件提交給VSCODE市場(chǎng)。

參數(shù)

vscode-snippet-generator 是一個(gè)命令行工具，它提供一些若干參數(shù)，這些參數(shù)你可以在命令行中指定，或在根目錄創(chuàng)建一個(gè)名為 snippet-config.json 配置信息。

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

每一個(gè)代碼片斷觸發(fā)是由 prefix 決定，而生成 prefix 的規(guī)則默認(rèn)是根據(jù)目錄及文件名結(jié)構(gòu)，例如：

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

當(dāng)然如果你愿意也可以通過一段 YAML 語法的頭部文本來標(biāo)記源文件，例如：

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

更多風(fēng)格示例，請(qǐng)參考 examples 目錄。

（完）