更友好的管理VSCODE代码片断

写在前面

对于我这种严格依赖 VSCODE 的人来说，会更努力的寻找释放生产力的方式，而代码片断是我日常最常用的功能之一。

从官网的 Creating your own snippets 可以非常容易的构建自己代码片断库。然而维护一个需要保持特定代码格式的JSON文件是一件非常困难的事，特别是对于像我这种三天头可能就产生一个新的片断来说是一种噩梦。

Markdown

我想99%的程序员都离不开 Markdown，如果说将一个 Markdown 文件内容直接转换成一个代码片断应该来说是很优雅的形式，例如：

这是一个按钮

｀｀｀html　（注意 ｀ 应该是英文）
$0
｀｀｀

与之相对应的智能提醒像这样：

demo.gif

维护一些 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 目录。

（完）