分享一下最近写的提高前端工作效率的两个插件,o-json(chrome插件)和o-file-path(VS Code插件)

180 阅读2分钟

1. chrome插件 o-json,作用是解析JSON及转换TS interface

之前我一直是用json.cn来查看后端返回的json,用久了逐渐遇到一些问题比较影响使用:

  1. 查看多个json容易分不清
  2. 这个网站的json输入框占了页面50%的宽度,实际上我粘贴后完全不看左边的输入框

于是动手写了一个,在chrome的new tab页实现,更快一点,实现了一点小功能:

  • 可以改变标签页名,方便区分
  • 自动读取剪切板JSON
  • 切换深色模式(方便天黑了还在加班的你我)
  • 转换TS interface

效果如图: sunlight_main.png

sunlight_set.png

matrix_ts.png

编辑器使用到的是jsoneditor,功能很强大,我对UI进行了一些魔改

可以从谷歌应用商店 o-json下载使用

也可以从github下载release包直接安装使用


2. VS Code插件 o-file-path,作用是复制别名路径、相对路径

QQ图片20220717235126.png

写这个的初衷是windows下VS Code自带的复制相对路径是反斜杠\每次都要手动改成斜杠/,顺便做了一点小功能:

  • 支持转换别名,如:src/comp/layout.vue会转换为@/comp/layout.vue
  • 支持直接复制带Import的完整导入语句,如:import Layout from '@/comp/layout.vue'
  • 支持复制相对路径,如:在src/comp/layout.vue导入src/comp/base/button.vue会直接复制./base/button.vue
  • 亦支持直接复制带Import的完整导入语句,如:import Button from './base/button.vue'

具体使用方法见github o-file-path

下载地址VS Code插件商店 o-file-path

也可以在VS Code插件商店搜索o-file-path


细心的朋友已经发现了,这两个插件的logo是一样的,这是因为这个logo是我花了99块大洋在某网站上生成了买的,舍不得再买就将就着都用这个了

欢迎大家使用,也欢迎来github提bug,谢谢。如果能够在工作中帮助到你,能在商店给一个5星好评是最好不过的,能让大家都用到是我的荣幸