一个经过NPM包共(分)享代码块的解决方案

经过NPM包共(分)享代码块，急速编写代码块方案

这是我参与更文挑战的第19天，活动详情查看：更文挑战

前言

最近又看到了许多小伙伴更新了Vs Code设置代码块的实践教程，简单总结就是，按规则编写一个code-snippets文件便可：

• 项目级：将文件放在.vsode目录下
• 全局：首选项 -> 用户片断 -> 全局代码块

一些问题

此种方案我以为仅能简单知足我的须要，但当我的须要编写大量snippet的时候，编写code-snippets配置文件比较麻

固然有大神作了在线的snippet配置生成的网站解决编写配置文件的繁琐，但也要复制粘贴。。

有没有不编写code-snippets配置文件也能加载自定义代码块的方式呢?有，固然有，后文会介绍到

但还有另外一问题，好比你想把你的snippet分享给其它同事或者朋友，有以下一些方案:

• 拷贝code-snippets文件
• 编写snippet插件，发到插件市场
• 。。。

能够看出这些常规的方案有一丝繁琐，不便于分享与传播

Share Snippets

大概三个月前我也写了篇文章简单介绍了这个插件出现的背景：助你轻松编写与分享snippet的VsCode插件｜项目复盘

大概就是，我来作插件的工做，你只负责编写简单的代码块配置文件

容许你以npm包的形式，将代码块的配置文件分享给全球开发者使用

但可能因为阅读量不高，目前下载体验的朋友也很少

简介

支持经过npm的形式分享你的代码块

即支持从node_modules中读取代码块的配置文件，并在编辑器中注册

除了支持加载官方的code-snippets配置文件，为了简化书写，也定义了一个更加简单的.snippets.json文件配置方案

特点

• 简化配置，支持直接指定文件做为代码块
• 为HTML标签，Vue/React组件的代码块进行了定制，支持很是完善的属性提示

使用

固然是先装上插件

tips：编写完新的代码块，如需当即生效，需手动执行 SP Refresh 命令

下面是编写配置文件的演示，插件提供了快速生成配置文件内容的代码块:

prefix	简介
ss-file	模板文件代码块
ss-vue	vue组件代码块
ss-react	react组件代码块
ss-tag	html标签代码块

一个配置文件，能够编写多个代码块

完整的配置文件编写文档

指定文件内容做为代码块

这里以几个简单的vue3代码块为例：

编写者只须要指定代码块内容文件的相对路径和激活代码块的前缀两项配置便可

Vue组件的代码块

以一个默认的 my-input 组件进行演示示例

支持完整的属性提示，支持以sp-开头展现组件的全部的可用属性

React组件代码块

以一个默认的 MyButton 组件进行演示示例

总结

我的认为，此插件不只能够帮助编写与分享代码块

也可用于业务开发中，公共业务组件添加一个.snippets.json配置，其它人使用的时候就能得到很友好的属性提示

最后

欢迎你们评论区交流，提出迭代意见

欢迎你们体验插件，提出宝贵的修改意见

• 插件源码
• 插件体验