Share Snippets介绍

借助Share Snippets，你可以通过npm包的形式分享你的代码片段，让其它的开发者能够轻松愉快的体验上，更新迭代方便

方案对比

项目级共享代码片段

特点

借助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打开命令输入框

未来

• 优化重新扫描项目代码片段的指令
• 加入可配置文件，优化片段代码中冗余的scope内容
• 片段内容body支持指定的文件(即将指定的文件内容作为片段的内容)

npm 包开发示例

非常简单，和直接编写官方.code-snippets文件一模一样

share-snippets-demo

• NPM地址
• GitHub

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

最后

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

相关链接

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