插件市场
/
插件详情
插件市场 | Plugins Market
插件管理工具
(77 人评分)
评分

Plugin-Market | 插件市场

必装插件,完全的“类VSCode”使用体验,持续更新中

Introduction

在编辑器左侧标签栏提供插件管理功能

Features

  • 在编辑器中直接 安装/卸载 插件(重启后生效)
  • 双主题支持 ,适配 白色 / 黑色主题
  • 多语言支持 ,适配 i18n
  • 支持直接在编辑器中预览插件详情
  • 支持查看插件明细 ( readme , 版本 , 用户评分 )
  • 支持一键私信插件作者
  • 支持直接为插件评分,点击星级后的“评分”就可以为插件进行评分
  • 支持直接查看插件使用的相关API (beta)

Preview

使用详情:

使用

使用演示:

预览

插件评分:

Image

插件内容监测:

Image

Configuration

即插即用,无需配置

TODO

下一步计划实现的功能有:

  • Editor预览,直接在Editor中提供插件详情预览,与 VSCode 完全一致的体验(已实现)
  • 插件分类索引(已实现)
  • 更详细的插件信息(已实现)
  • 插件推荐(暂时没想好推荐方案)
  • 一键撰写评分 (已实现)
  • 浏览商店(类插件市场页面,多分类展示,暂时还没想好放在哪个页面)

FAQ

  1. 为什么点击插件查看详情会跳转到网页?

    因为暂时无法做到通过Editor加载Markdown视图,未来插件API升级以后可以尝试添加(已经实现插件详情页了)

  2. 为什么安装插件没有反馈?

    反馈信息使用了 右上角的默认提示,如果不确定的话可以删掉所有搜索词,查看已安装列表

  3. 已经安装的插件如何启用?

    点击重新载入按钮即可,如果没有出现该按钮,请手动刷新页面

  4. 为什么点击安装/卸载有一个小插头图标?

    这个图标表示由于这个插件发生了改变,故而页面需要重载,方便在安装/卸载多个插件之后撤销修改

  5. 我从别的页面装完插件,这边能看到吗?

    可以看到,刷新已安装的插件,将会列出发生更改的插件概况

  6. 如何查看每个分类下的所有插件呢?

    你可以在搜索框中输入一个%或者_,就可以匹配到所有插件啦 (2019年1月6日更新: 输入框右侧图标可以一键查看)

  7. 插件搜索的排序方式是什么?可以修改吗?

    目前版本是按总分排序,暂时还不可以修改

ChangeLog

  • 2019年01月06日, 按分类筛选的图标改为filter(漏斗),更具语义化,输入框新增了一个一键查看所有插件的图标
  • 2018年12月21日, 添加 “禁用” 功能
  • 2018年12月19日, 修正选中项Focus效果的切换时机
  • 2018年12月04日, 修正列表Focus效果,纯CSS会导致失去焦点不便查找
  • 2018年12月01日, 添加插件附加信息检测,直接检测插件调用的相关模块API
  • 2018年11月30日, 添加插件评分功能,无需跳转到商店即可评分
  • 2018年11月29日, 优化搜索结果列表,重构了相关组件,现在支持无限滚动、按需加载列表啦
  • 2018年11月28日, 优化明细页显示效果,fix一个显示异常(i18n)
  • 2018年11月27日, 优化插件明细页面,新增历史版本查看,新增插件评论查看等
  • 2018年11月26日, 优化列表页UI,优化markdown结构,优化显示效果
  • 2018年11月26日, 添加插件详情页,优化插件搜索
  • 2018年11月25日, 添加分类搜索,优化重载需求的判断逻辑,在搜索页也可以直接看到已安装的插件了
  • 2018年11月25日, 添加搜索防抖,修改“插件作者字体”,重构列表页,为插件分类做准备,优化已安装的插件的表现样式

Contact

问题反馈:mail : mscststs@qq.com

About

感谢使用本插件

如果觉得本插件非常不错,请给予一个好评,好的评价是持续更新的动力


以下信息为开发者相关,普通用户无需查看

以下描述了本插件开发中遇到的一些问题或者使用的方法

插件开发记录

第一步,先确定插件需求

总的来说,其表现形式应该类似于VSCode的扩展管理,

  1. 提供插件安装/卸载的入口
  2. 插件搜索
  3. 多语言、主题支持

多语言、主题支持

多语言支持使用开发手册中的i18n配置教程即可解决。 官方示例插件中也有多语言支持的配置示范,实际上只需要向PluginContext注册一个language对象即可

其格式形如:

const context = new PluginContext({
    //注入灵魂(划掉)
    i18n: { customLanguagePool: languages },
    styles: { dark: darkTheme, light: lightTheme },
});

//languages:
{
    zh_CN:{
        name:"中文名",
    },
    en_US:{
        name:"English Name",
    }
}

注入主题也是同样的方法。 推荐通过官方示例,使用stylus等编译CSS文件。

同时,为了方便在不同文件中使用context.i18n.get(),我将context移至了单独的文件方便引入

插件安装/卸载

网络通信模块直接使用 axios 即可。

相关的网络请求可以直接查看本插件 git/src/actions/api.js

需要注意的是所有的请求都需要带上

headers{
    "x-requested-with": "XMLHttpRequest"
}

POST和PUT请求别忘了 body 格式为 "application/x-www-form-urlencoded", 这个也需要在header中声明并且做手动格式转换

注入插件详情页

通过RegistContentProvider注入内容组件。我这里直接使用了EventBus来想办法切换插件页面

为了获得焦点,使用了"脏"焦点获取方法,通过原生JS取到相关标签的title触发其click事件。

虽然不好看,但是意外的好用(?)

列表按需加载

按需加载其实是一个很简单的需求,在一般的网页上都只需要使用一个 “下一页” 按钮来让用户点击就行了,但是这样交互体验就非常差了(OTZ)

在原来的设计中(在0.0.7版本之前),是没有分页的!对!没有分页,一次加载100个!因为插件市场还不够丰富,100个足以加载出所有的插件。但是随着近几天插件的数目不断增多,这个坑已经到了不得不出手完善的地步了。

首先,抽象出一个SeachList类,用于管理每一个搜索结果形成的列表,其需要根据搜索结果,指导 Result 组件填充足够的loading Block(一个loading状态的填充块)长度,这个地方并不困难。

然后感觉 VSCode 的 Loading 样式还蛮好看,网上找了找CSS,现扒(抄)了一个,至此,看起来所有的工作都已经就绪。

  1. 问题一:一次性加载数十个甚至上百个Loading对CPU造成大量负载。

    这个问题真的是CPU负载,Animation 的相关操作统统使用了GPU加速,但是使用的 Loading Block 数量实在太多,当搜索完毕出现列表页面之后,CPU就飙升10%,台式机尚且如此,肯定是不能忍的。
    于是开始着手优化,既然要屏蔽掉一些 loading Block,那么就需要绑定scroll事件

于是第二步,针对 scroll 事件,在 Dom 上计算出当前显示的 Page 区域,再给对应的区域启用 Loading 。

最后的结果就是:

由于服务器响应速度太快……用户甚至没有看到 Loading ,新的列表就加载完成了……【扶额.jpg】

目前,无限滚动、按需加载列表已上线。你在搜索结果列表里滚动的时候,会自动按需请求。

在浏览器 network 里,大概是这样的

Image

当然,如果你实在想看看那个 loading 效果,你可以先把网线拔了,再滚动列表。 (为什么要看loading啊!)

【真香.jpg】


感谢你的阅读。欢迎与我讨论交流插件的相关问题。

分类
编辑器功能增强
更多信息
版本0.0.17
发布时间2019/01/30 10:50
分享给好友
使用微信扫描二维码
然后分享给好友
用户评价
暂无评价
联系我们
电话
400-930-9163
腾讯云开发者平台由腾讯云及 CODING 共同运营,目前由 CODING 团队提供运营服务。