一个通过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 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章介绍了npm的基础知识和常用命令,包括安装包、查看包信息、管理依赖等操作,并提供了如何删除npm安装的镜像以及如何彻底删除node_modules文件夹的具体步骤。
149 2
|
2月前
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
97 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
1月前
|
JavaScript
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
151 26
|
1月前
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
97 5
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
npm账户需要登录问题npm error probably out of date. To correct this please try logging in again with优雅草央千澈解决方案
npm账户需要登录问题npm error probably out of date. To correct this please try logging in again with优雅草央千澈解决方案
43 0
npm账户需要登录问题npm error probably out of date. To correct this please try logging in again with优雅草央千澈解决方案
|
4月前
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章是关于npm包管理工具的学习、使用指南,包括npm概述、基础命令和如何安装webpack。
115 3
npm学习一:npm 包管理工具 学习、使用。
|
4月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
225 0
|
5月前
|
数据安全/隐私保护
发布一个npm包
发布一个npm包
150 2
|
7月前
|
运维 Kubernetes Java
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
|
6月前
NPM——删除已发布的包
NPM——删除已发布的包
183 1

热门文章

最新文章

推荐镜像

更多