牛市来了，Stockbar帮你把握上车的机会？

不败花丶
1,571 阅读6分钟

声明：本文仅以最近牛市为场景，主要在于分享VsCode插件技术的学习和交流，并不提供任何投资建议！thx~

牛真的来了？

最近，咱们的大 A 真的是风风火火，有种要带入全民炒股的节奏。但是作为散户，作为搬砖仔，哪有时间关注突如其来的行情变化？？？那又怎么可能找到合适的上车机会呢？？？

于是乎决定整一个盯盘工具，最起码能快速感知到大盘的异动，以避免踏空、成千古恨。

怎么个盯盘法？

就本人而言，日常最常用的工具就是 VsCode 代码编辑器。所以考虑使用 VsCode 简单整个可以实时追踪行情的 VsCode 插件。

那么我们期待它应该需要有哪些能力呢？可以看到 2 个待办如下：

  • 可以关注多只票，支持快速检索和添加
  • 实时更新展示指数行情，能看到涨跌波动

最终产品效果如下演示，感兴趣的就接着往下看吧。

image.png

image.png

行情数据源怎么来？

针对上述 2 个能力，首先要解决的是数据问题，即需要 2 个数据源：

  1. 根据股票名查询股票信息的接口
  2. 根据股票代码查询股票当日实时行情的接口

咱们这边就不专门分析券商接口如何如何调用了，得力于 ChatGPT 的强大，简单问下很快就能找到解决办法😋：

关注的股票往哪存？

有了数据之后，那么搜索关注的股票肯定要做本地存储，避免丢失，那么应该放在哪里呢？

由于考虑存在用户设置的诉求，比如：持股成本、简化别名等以及后续扩展诉求，所以我们可以考虑把配置相关放在 VsCode 标准 settings.json 配置文件中。

数据结构定义

这里简单约定下配置对象的数据结构定义，大致如下：（PS： 没错我们的插件名就叫 stockbar ）

{
  "stockbar.stocks": [
    {
      "code": "sh000001", // 股票代码
      "alias": "SZ",      // 简化别名
      "cost": 6000.00,    // 持股成本
    }
  ]
}

如何写入

在每次搜索选择时，我们就可以执行写入 setting.json 操作，大致如下：

const stocks = [{ code: "sh000001", alias: "SZ", cost: 6000 }];

// 读取配置读写
const stockBarConfig = vscode.workspace.getConfiguration('stockbar');

// 更新配置字段，并消息提示
stockBarConfig.update('stocks', stocks, true).then(() => {
    vscode.window.showInformationMessage(`Stock Successfully add.`);
});

如何读取

因为考虑实时监听，所以定时器刷新渲染股价列表视图，理论每次都会读取配置文件。

这里呢，为了更好地性能，避免频繁读文件系统 IO 操作，使用 onDidChangeConfiguration 优化读取频率：

const stockBarConfig = vscode.workspace.getConfiguration('stockbar');

context.subscriptions.push(
  // 监听配置变更时触发 视图刷新
  vscode.workspace.onDidChangeConfiguration(() => {
    const stocks = stockBarConfig.get('stocks');
    // 定时刷新渲染视图
    loopTaskRender();
  }),
);

实时渲染展示怎么弄?

看到这里，我们知道咱们股票配置已经有了，获取实时行情接口也有了，所以这里要做的就是基于定时器去做两件事：查询实时股票行情 + 渲染即可。

关于渲染，我们使用 createStatusBarItem 渲染股票价格信息到VsCode底部。

const delay = Configuration.stockBarConfig.get('updateInterval')

// 定时循环任务
function loopTaskRender() {
  setTimeout(() => {
    render()
  }, delay)
}

async function render() {
  // 批量请求股票实时行情数据
  const stockCodes = stocks.map((v) => v.code);
  const stockDataList = await sinaStockProvider.fetch(stockCodes);

  // 逐个渲染到 VsCode 左下角底部
  for (const item of stockDataList) {
	const barItem = vscode.window.createStatusBarItem(
	  item.code,
  	  vscode.StatusBarAlignment.Left,
	);
    // 读取接口数据：'别名:股价 实时涨跌幅度 ♟盈亏比'
    barItem.text = '上证:3284.3225 2.07% ♟-45.26%'
	barItem.show();
  }

  loopTaskRender()
}

当然这里只是简单示例，实际上考虑性能，实时渲染策略是可以优化的，比如：仅在 工作日 && 开盘时间 执行请求和渲染逻辑。

如何快捷添加选股?

其实，我们添加关注的股票列表都可以在 settings.json 中配置，不需要检索也没关系。但考虑股票代码的登记成本，我们还是要支持根据股票名模糊检索股票，选股并添加到配置文件中。

这里我们使用 createQuickPick 唤起 VsCode 弹层选择器，用于输入关键词查询股票。

function addStock() {
  const popup = vscode.window.createQuickPick();
  popup.items = [{
    label: 'Please enter keywords to search, such as: 0000001'
  }];

  // 检索词录入回调 
  popup.onDidChangeValue((keyword) => {
    // 调用 根据关键词查询股票列表接口
  })

  // 点击选中股票回调
  popup.onDidChangeSelection((evt) => {
    // 读取evt得到选中的股票，更新到配置文件中
  });

  popup.show();
}

那么站在交互侧，应该以怎样的交互形式唤起选股弹窗选择器呢？

当然作为程序员，这里采用了最简单的快捷键方式：

  1. 使用 registerCommand 注册命令
vscode.commands.registerCommand('stockbar.addStock', addStock);
  1. 在 package.json 中声明快捷键绑定
{
  "contributes": {
    "keybindings": [{
      "command": "stockbar.addStock",
      "key": "shift+alt+s",
      "mac": "shift+alt+s",
    }]
  }
}

最终，我们的盯盘神器 Stockbar 就诞生了~~~(^▽^)

Stockbar总结

这里也简单小结整理下功能架构，大致如下：

stockbar.png

VsCode是大部分前端同学每天接触最多的东西，而 Stockbar 作为 VsCode 插件扩展，目的是给搬砖的各位时不时钉盘的助手，避免错过大牛市的最佳上车机会~

当然这里主要以分享学习为主，对于开发什么样的插件、实现怎样的功能、以及如何交互呈现，这就要靠你从工作和生活中去发现、去找寻灵感并提炼了。

看到这里，核心功能介绍和实现基本就结束了。后面【附录】会把 VsCode 插件开发的流程串一遍，想正儿八经实践下的可以了解下。

最后，祝点赞的在车上的各位都能接住牛市，财源滚滚！！！

image.png

附录：开始调试发布一把嗦

VsCode 底层主要基于 TypeScript 编写的，基于插件化设计的扩展包机制也是要基于 TypeScript 编写的， 所以作为前端同学，其实写插件是比较友好的，开发整体流程大致如下：

创建仓库

首先在准备好 Node 环境的情况下，直接在【命令终端】执行如下命令即可创建一个初始化的插件代码仓库：

# 环境 node.v18
npx --package yo --package generator-code -- yo code

非常清晰，src/extension.ts 即我们的插件启动入口文件。

image.png

开发调试

为了调试这个插件，我们在 VsCode 中打开该仓库，按下 F5（Mac系统请按 fn + F5），你会立即看到一个插件发开主机窗口，其中就运行着该插件。在命令面板(Ctrl+Shift+P)中输入 Hello World 命令，即可看到右下角提示（官方默认HelloWorld示例）。

image.png

打包发布

  1. 如果是第一次注册，你可能需要在 插件开发平台 上创建组织，然后再创建项目。

image.png

  1. 在用户设置中创建自己的 Token，创建完成后记得复制备份自己的 Token。

image.png

image.png

  1. 在发布之前，你还需要拥有发行方账号，访问如下站点可创建，只填必填即可（请记住这个 Name）

marketplace.visualstudio.com/manage/crea…

image.png

  1. 在发布账号和密钥准备好之后，接下来就是命令式登录，快速发布了。

注意：这里 vsce 是一个 npm 包，可通过npm i -g vsce安装到全局。

# Flcwl即刚刚你要记下的Name; 再输入刚才的私钥Token
vsce login Flcwl

image.png

image.png

  1. 最后我们可以在自己的插件项目下，执行 vsce publish $version 进行发布即可，对应就会更新到插件市场中去了。

记得更新下自己的版本号。

参考

  1. code.visualstudio.com/api/get-sta…
  2. liiked.github.io/VS-Code-Ext…
avatar
文章
阅读
粉丝