更友好的管理VSCODE代码片断

写在前面

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

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

Markdown

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

这是一个按钮

```html (注意 ` 应该是英文)
<button type="${1|text,tel,email|}">$0</button>
```

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

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 目录。

(完)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • 2018年的第一天,这个时刻,是不是应该写点什么纪念一下。 按以往惯例,更多的就是回顾17年的历史...
    红缨阅读 180评论 0 1
  • 一直以为一辈子很长很长,是自己怎么都挥霍不完,直到感受到那些鲜活的生命都离我们而去时,就突然会发现,生命很...
    飘雨l阅读 403评论 0 3
  • 打开简书,便看到大佬们写的文章。不伐有"我在简书写作三年,收入年过百万"的标题。每每看到这,就会忍不住的点开来看看...
    谦云上的飞鸟阅读 180评论 0 1