vscode 扩展 - voice-vscode
这是一个采用 React + Vite + TailwindCSS4 + DaisyUI5 构建的 vscode 插件，能够进行 vscode 音频录制。
功能特点
- 🚀 使用 Vite 作为构建工具，提供快速的开发体验
- ⚛️ 使用 React 18 构建 WebView UI
- 🔍 TypeScript 支持，提供类型安全
- 🎨 集成 Tailwind CSS 和 daisyUI 进行样式管理和 UI 组件
- 🌓 支持亮色/暗色主题切换
- 🔄 WebView 与扩展之间的双向通信
- 💾 WebView 状态管理
- 🧩 使用 VS Code WebView UI Toolkit 组件
项目结构
├── extension/ # VS Code 扩展代码
│ ├── index.ts # 扩展入口文件
│ ├── services/ # 扩展服务
│ └── views/ # WebView 相关代码
│ ├── helper.ts # WebView 辅助函数
│ ├── panel.ts # WebView 面板管理
│ └── sidebar.ts # 侧边栏视图提供者
├── src/ # React 应用代码
│ ├── App.tsx # 主要 React 组件
│ ├── main.tsx # React 应用入口
│ ├── pages/ # 页面组件
│ └── utils/ # 工具函数
│ └── vscode.ts # VS Code API 工具
├── assets/ # 静态资源
├── python/ # Python 脚本
└── package.json # 项目配置
安装
# 克隆仓库
git clone https://github.com/fromsko/voice-vscode.git
# 进入项目目录
cd voice-vscode
# 安装依赖
npm install
# 或者使用 yarn
yarn
# 或者使用 bun
bun install
开发
# 启动开发服务器
npm run dev
# 或者
yarn dev
# 或者
bun dev
然后，在 VS Code 中按下 F5 启动扩展开发主机。
使用方法
- 在 VS Code 中，按下
Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）打开命令面板
- 输入 "Hello World: Show" 并选择该命令
- 将会打开一个 WebView 面板，显示 React 应用
扩展功能
命令
Hello World: Show - 显示 WebView 面板
视图
- 在活动栏中添加了一个 "Hello World" 图标，点击可以打开 WebView 面板
- 侧边栏视图保持状态，切换时不会重新加载（使用
retainContextWhenHidden: true）
WebView 功能
UI 组件
- 使用 daisyUI 组件库构建美观的用户界面
- 支持亮色/暗色主题切换
- 响应式设计，适应不同大小的窗口
构建
bun run dev
bun run build
bun run preview
bun run copy-python
技术栈
| |
