更友好的管理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 目录。

（完）