Share Snippets介绍
借助Share Snippets，你可以通过npm包的形式分享你的代码片段，让其它的开发者能够轻松愉快的体验上，更新迭代方便
方案对比
项目级共享代码片段
| 方案 | 学习成本 | 传播能力 | 生效方式 | 缺点 |
| 在.vscode目录编写片段规则 | 低 | 低 | 项目中编写后直接生效 | 不方便传播，更换项目需要重新C/V |
| 开发snippets插件 | 中 | 高 | 安装对应的插件在VS Code中 | 更换设备需要重新安装相关的插件 |
通过npm包 |
低 | 高 | 使用npm install package 即可 |
特点
借助Share Snippet无需你开发Snippet插件，就能轻松的让其它人使用你的代码片段
代码片段的规则完全参照VS Code官方文档的自定义代码片段规则
特点总结
- 容易传播
- 引入方便
- 升级更新方便
- 学习成本极低
- 。。。
demo.code-snippets
{ "Print Text": { "scope":"javascript,typescript,vue,react", "prefix": "lg", "body": "console.log($1)", "description": "console.log" } }
tips：四个属性都为必填值才能生效
注意
- 插件会在VS Code启动的时候进行一次文件的扫描
- 可以通过命令输入
Refresh进行重新扫描 - 插件只会扫描
share_snippets目录下以.code-snippets结尾的文件 - 无论目录层级多深只要是在
share_snippets目录下以.code-snippets结尾的文件都能被扫描到并在项目中启用
比如
node_modules └── package1Name │ └──share_snippets │ ├── comment │ │ └── test1.code-snippets │ └── test2.code-snippets └── package2Name └──share_snippets ├── comment │ └── test1.code-snippets └── test2.code-snippets share_snippets ├── comment │ └── test1.code-snippets └── vue └── test2.code-snippets
指令
首先需要按F1打开命令输入框
| 指令名称 | 作用 |
| Refresh | 重新扫描项目中的片段文件 |
未来
- 优化重新扫描项目代码片段的指令
- 加入可配置文件，优化片段代码中冗余的
scope内容 - 片段内容
body支持指定的文件(即将指定的文件内容作为片段的内容)
npm 包开发示例
非常简单，和直接编写官方.code-snippets文件一模一样
share-snippets-demo
可以clone或者fork项目，然后编写自己的代码片段，发布到NPM
最后
希望此插件能够帮助你提高编码的体验与效率，提升编码的幸福感😊,使用途中有任何问题，请直接与我联系
