VS Code项目中通过npm包的方式共享代码片段的方案实现

VS Code项目中通过npm包的方式共享代码片段的方案实现

上周在 “VS Code项目*享自定义的代码片段方案” 的文章中提到过一个共享代码片段的方案，上周经过调研后并没有发现现成的插件，就抽了点空实现了这个方案，最终产出Share Snippets 这个插件去实现这个设想

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：四个属性都为必填值才能生效

注意

1. 插件会在VS Code启动的时候进行一次文件的扫描
2. 可以通过命令输入Refresh进行重新扫描
3. 插件只会扫描share_snippets目录下以.code-snippets结尾的文件
4. 无论目录层级多深只要是在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

• NPM地址
• GitHub

可以clone或者fork项目，然后编写自己的代码片段，发布到NPM

最后

希望此插件能够帮助你提高编码的体验与效率，提升编码的幸福感,使用途中有任何问题，请直接与我联系

相关链接

• VS Code项目*享自定义的代码片段方案
• 插件地址
• GitHub仓库
• NPM包编写示例

你的指尖拥有改变世界的力量