台股即時顯示 VS Code 擴充功能

在 VS Code 中即時顯示台灣股市資訊的輕量級擴充功能。

✨ 功能特色

📊 即時更新 - 每30秒自動更新股票資訊
📈 視覺化顯示 - 漲紅跌綠，一目了然
🎨 側邊欄 TreeView - 專屬股票監看面板
🏢 官方中文名稱 - 整合 TWSE API 顯示正確公司名稱
🔔 StatusBar 整合 - 不干擾工作流程的狀態列顯示
⚙️ 自訂關注清單 - 輕鬆新增/移除股票
📋 自訂排序 - 手動調整股票顯示順序，支援行內按鈕、右鍵選單、快捷鍵三種操作方式
💾 持久化儲存 - 關注清單和排序設定自動保存

📸 預覽

StatusBar 顯示範例：

$(arrow-up) 2330 ▲580.00 | $(arrow-down) 2317 ▼105.50 | $(dash) 2454 –300.00

🚀 快速開始

安裝

從 VS Code Marketplace 安裝（推薦）

開啟 VS Code
按下 Ctrl+Shift+X（Mac: Cmd+Shift+X）開啟擴充功能面板
搜尋「台股即時顯示」或「Taiwan Stock Live」
點擊「Install」安裝

或手動安裝（開發者）

git clone https://github.com/gatewen/vscode-taiwan-stock-watch.git
cd vscode-taiwan-stock-watch
npm install
npm run compile

使用方式

新增股票
- 按下 Ctrl+Shift+P（Mac: Cmd+Shift+P）
- 輸入 台股: 新增股票
- 輸入4位數股票代號（例: 2330）
移除股票
- 執行指令 台股: 移除股票
- 從清單中選擇要移除的股票
手動重新整理
- 執行指令 台股: 重新整理
清空關注清單
- 執行指令 台股: 清空關注清單
調整股票順序（自訂排序模式）
- 點擊 TreeView 標題列的排序圖示切換模式（🔀 自動排序 ⇄ 📋 自訂排序）
- 在自訂模式下，有三種方式調整順序：
  - 方式 1：直接點擊股票右側的 [↑] [↓] 按鈕（最方便）
  - 方式 2：右鍵點擊股票選擇「上移股票」或「下移股票」
  - 方式 3：使用快捷鍵 Alt+Up / Alt+Down
- 自動模式：依漲跌幅由大到小排序
- 自訂模式：手動調整顯示順序並自動保存

⚙️ 配置選項

在 VS Code 設定中可調整以下選項：

{
  // 關注股票代號列表
  "taiwanStock.watchlist": ["2330", "2317"],

  // 更新間隔（毫秒），預設 5000 (5秒)
  "taiwanStock.updateInterval": 5000,

  // 資料來源提供者
  "taiwanStock.dataProvider": "yahoo",

  // 顯示模式
  "taiwanStock.displayMode": "statusbar",

  // 排序模式（auto: 自動排序, custom: 自訂排序）
  "taiwanStock.sortMode": "auto",

  // 自訂顏色
  "taiwanStock.colors.rise": "#FF4444",
  "taiwanStock.colors.fall": "#44FF44",
  "taiwanStock.colors.flat": "#888888"
}

🏗️ 專案架構

src/
├── extension.ts              # 擴充功能入口點
├── models/
│   └── StockInfo.ts          # 資料模型定義
├── providers/
│   ├── IStockDataProvider.ts # 資料提供者介面
│   └── YahooFinanceProvider.ts # Yahoo Finance 實作
├── services/
│   └── TwseStockInfoService.ts # TWSE 官方名稱服務
├── managers/
│   └── StockDataManager.ts   # 核心資料管理器
├── ui/
│   ├── StockStatusBar.ts     # StatusBar UI 組件
│   ├── StockTreeDataProvider.ts # TreeView 資料提供者
│   └── StockDecorationProvider.ts # 文字顏色裝飾器
└── utils/
    └── TaiwanStockNames.ts   # 股票名稱對照表（備援）

設計模式

策略模式 - 可抽換的資料源提供者
觀察者模式 - 事件驅動的資料更新
分層架構 - UI → 業務邏輯 → 資料存取 → 持久層

詳細架構說明請參考 ARCHITECTURE.md

🛠️ 開發

環境需求

Node.js >= 16
VS Code >= 1.85.0

開發指令

# 安裝依賴
npm install

# 編譯 TypeScript
npm run compile

# 監看模式（開發時）
npm run watch

# 執行測試
npm test

# 程式碼檢查
npm run lint

# 打包擴充功能
vsce package

除錯

在 VS Code 中按 F5
會開啟新的 Extension Development Host 視窗
在原視窗設定中斷點進行除錯

📝 待辦事項

Phase 1 (MVP) ✅

[x] 基本資料模型
[x] Yahoo Finance Provider
[x] StockDataManager 核心功能
[x] StatusBar 顯示
[x] 基本指令（新增/移除/重新整理）
[x] 自動更新機制

Phase 2 ✅ 已發布 v0.1.1

[x] TreeView 側邊欄顯示
[x] TWSE API 整合（官方中文名稱）
[x] 文字顏色裝飾（紅綠標示）
[x] 24 小時名稱快取機制
[x] 自訂股票排序功能
- [x] 雙模式切換（自動/自訂）
- [x] 行內按鈕操作（↑ ↓）
- [x] 右鍵選單支援
- [x] 快捷鍵支援（Alt+Up/Down）
- [x] 設定持久化（Global Configuration）
[x] 已發布到 VS Code Marketplace 🎉
[ ] 多資料源支援（FinMind）
[ ] 完善錯誤處理

Phase 3（規劃中）

[ ] 價格提醒通知
[ ] 歷史資料圖表
[ ] 匯入/匯出關注清單
[ ] 自訂顏色主題

⚠️ 注意事項

資料準確性 - 本擴充功能提供的資料僅供參考，請以官方管道為準
API 限制 - 免費 API 有請求頻率限制，請勿過度頻繁更新
市場時段 - 台股交易時間為週一至週五 09:00-13:30，非交易時段資料可能不更新
延遲聲明 - 資料可能有延遲，不適用於即時交易決策

📦 版本資訊

當前版本：v0.1.2

更新日誌

v0.1.2 (2025-10-10)
- 🐛 修復關鍵 Bug：Tab 功能在打包後無法使用
- 修正 isTabFeatureEnabled() 函數的 fallback 值
- 確保新安裝時 Tab 模式正確啟動
- 所有 Tab 指令（建立、刪除、切換等）恢復正常
v0.1.1 (2025-10-10)
- 🐛 修復打包後顏色顯示問題
- 📦 優化發布流程（esbuild 整合）
- 📄 新增 LICENSE 和文檔優化
v0.1.0 (2025-10-10)
- 🎉 首次發布到 VS Code Marketplace
- ✨ 完整的 TreeView 和 StatusBar 功能
- 🎨 自訂排序功能

完整更新日誌請參考 GitHub Releases

🔗 相關資源

📄 授權

MIT License

🤝 貢獻

歡迎提出 Issue 或 Pull Request！

📧 聯絡方式

如有問題或建議，請透過 GitHub Issues 聯繫。

免責聲明：本軟體僅供教育和參考用途，不構成任何投資建議。使用者應自行判斷投資決策。

台股即時顯示

Wen-Te Li