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

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

最后

希望此插件能够帮助你提高编码的体验与效率，提升编码的幸福感

版权声明：本文为roseAT原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/roseAT/p/13131235.html