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

简介: 一个通过NPM包共(分)享代码块的解决方案

前言


最近又看到了许多小伙伴更新了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配置,其它人使用的时候就能获得很友好的属性提示


最后


欢迎大家评论区交流,提出迭代意见

欢迎大家体验插件,提出宝贵的修改意见

相关文章
|
4月前
|
JavaScript Linux 数据安全/隐私保护
node内网安装npm私服以及依赖包上传发布verdaccio
node内网安装npm私服以及依赖包上传发布verdaccio
358 1
|
1月前
NPM——删除已发布的包
NPM——删除已发布的包
45 1
|
2月前
|
运维 Kubernetes Java
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
|
1月前
|
JavaScript 前端开发 开发者
从零到一:教你如何发布自己的npm插件包
从零到一:教你如何发布自己的npm插件包
|
1月前
|
JavaScript
GitHub——自动发布NPM包
GitHub——自动发布NPM包
11 0
|
3月前
|
Dart JavaScript 前端开发
npm install node-sass 安装失败的解决方案:利用国内镜像加速安装
npm install node-sass 安装失败的解决方案:利用国内镜像加速安装
1470 1
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
从0到1开发一个自己的npm包完整过程
创建自己的 npm 包涉及六个步骤:1) 注册 npm 账号;2) 使用 `npm init` 初始化项目,确保 package.json 的 name 唯一且 private 为 false;3) 开发项目,可封装 UI 组件、函数库或命令行工具;4) 本地调试,通过 `npm link` 在项目中测试;5) `npm login` 登录账号,可能需切换至官方仓库;6) 使用 `npm publish` 发布项目。注意版本号递增,无意义的包不建议发布。
164 2
从0到1开发一个自己的npm包完整过程
|
4月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
67 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
2月前
|
JavaScript 测试技术
npm发布自己的插件包
npm发布自己的插件包
|
2月前
|
JavaScript 开发工具 数据安全/隐私保护
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
61 0

推荐镜像

更多