VScode状态栏增加插件包显示实时金价信息

前言全局说明

网上找API接口的时候，突然发现有人使用vscode实时监控金价，好家伙，真没想到插件还能这么玩

一、说明

1.1 调试环境:

Windows 11 家庭版 24H2 26100.4061
vscode 1.85.2 (绿色版)

1.2 package.json 字段说明

https://www.cnblogs.com/wutou/p/19690002

二、文章连接

源码安装和打包好的.vsix插件安装
插件安装命令： code --install-extension your-extension.vsix

三、手动安装插件

3.1 插件目录，说明

3.1.1 vsCode 安装版, 全局插件目录

C:\Users%USERNAME%.vscode\extensions

3.1.2 vsCode 绿色版，当前版本插件目录

绿色版安装路径\data\extensions

教程安装路径：D:\Program Files\VSCode-win32-x64-1.85.2\data\extensions

3.2 新建文件夹

注意：
文件夹名一定能要和 package.json 里 name 字段名字一样，否则不会显示

3.3 手动新建插件

1.文件夹名和name一样；
2.文件夹下包含 package.json 和 extension.js

一个新模块就需要，新建文件夹然后放入 package.json 和 extension.js ，不需要修改其他任何文件。

package.json 相当于插件的配置信息文件
extension.js 相当于 main 文件，名字可以任意，在 package.json 里指定即可。

3.4 显示在插件

能和下图一样，说明你安装成功了，至于Logo后期可以补充

3.5 设置状态栏显示图标

在 extension.js 中，用 $(cloud) 来设置状态栏中的图标。

更多图标汇总列表，看文末“官方图片列表”章节

3.6 重启vscode加载插件

修改后代码后，重启才能生效

按 Ctrl+Shift+P → 输入 Developer: Reload Window 强制重启 VS Code。

四、基础文件

extension.js   // (必须)功能代码，相当于main()函数
gold.png       // Logo 在 package.json 里 icon 字段指定
LICENSE.txt    // 版权文件
package.json   // (必须) 一个模块就是一个包，整个模块的说明配置文件
readme.md      // 模块包介绍，内容会显示在插件启用(禁用)下面 细节 处

4.1 readme.md 内容显示

五、官方图标列表

微软官方在vscode里内置很多图标可以之间使用
官方图标列表：
https://code.visualstudio.com/api/references/icons-in-labels

5.1 常见图标语法

格式：

$(图标名称)

示例：

$(cloud) → ☁️ 云图标
$(radio-tower) → 📡 雷达/信号塔图标
$(package) → 📦 包裹图标
$(error) → ❌ 错误图标
$(sync~spin) → 🔄 旋转的同步图标（动态效果）
你的代码中使用的图标
在你的黄金价格扩展中，使用了以下 Codicons：

httpStatusBarItem.text = `$(cloud) 民生: 加载中...`;      // ☁️ 云图标（民生数据）
zsStatusBarItem.text = `$(package) 浙商: 加载中...`;     // 📦 包裹图标（浙商数据）
wsStatusBarItem.text = `$(radio-tower) WS金价: 连接中...`; // 📡 信号塔图标（WebSocket）

免责声明：本号所涉及内容仅供安全研究与教学使用，如出现其他风险，后果自负。

参考、来源：
https://www.wenxiaobai.com/fdf606e6-2f1e-4a6d-bfeb-1fc001756344 （$(cloud) 是什么图标）
https://cn.bing.com/search?q=https%3A%2F%2Fapi.jdjygold.com%2Fgw2%2Fgeneric%2Fjrm%2Fh5%2Fm%2FstdLatestPrice&refig=69aced8d27554f24b70e02b1901375b2&pc=U531&FPIG=3582D01C06FA4ECBB8B0E80D49646A51&first=10&FORM=PERE （仅需两个文件，实现在 VS Code 状态栏监控黄金价格）
https://cn.bing.com/search?q=https%3A%2F%2Fapi.jdjygold.com%2Fgw2%2Fgeneric%2Fjrm%2Fh5%2Fm%2FstdLatestPrice&form=ANNTH1&refig=69aced8d27554f24b70e02b1901375b2&pc=U531&ntref=1 （如何实现在 VS Code 状态栏监控黄金价格、在VS Code状态栏显示实时黄金价格）
https://www.wenxiaobai.com/3e0c5dd9-e0af-4ac4-afcb-fe709e158da1

posted @ 2026-03-09 14:28 悟透阅读(70) 评论(0) 收藏举报

刷新页面返回顶部