https://github.com/fromsko/voice-vscode
voice-vscode 采用 无头浏览器实现的 Vscode 语音录制的 vscode 插件
https://github.com/fromsko/voice-vscode
Last synced: 9 months ago
JSON representation
voice-vscode 采用 无头浏览器实现的 Vscode 语音录制的 vscode 插件
- Host: GitHub
- URL: https://github.com/fromsko/voice-vscode
- Owner: Fromsko
- Created: 2025-08-08T07:32:17.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-08T08:03:14.000Z (10 months ago)
- Last Synced: 2025-08-08T09:22:15.033Z (10 months ago)
- Language: TypeScript
- Size: 59.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 # 项目配置
```
## 安装
```bash
# 克隆仓库
git clone https://github.com/fromsko/voice-vscode.git
# 进入项目目录
cd voice-vscode
# 安装依赖
npm install
# 或者使用 yarn
yarn
# 或者使用 bun
bun install
```
## 开发
```bash
# 启动开发服务器
npm run dev
# 或者
yarn dev
# 或者
bun dev
```
然后，在 VS Code 中按下 F5 启动扩展开发主机。
## 使用方法
1. 在 VS Code 中，按下 `Ctrl+Shift+P`（Windows/Linux）或 `Cmd+Shift+P`（macOS）打开命令面板
2. 输入 "Hello World: Show" 并选择该命令
3. 将会打开一个 WebView 面板，显示 React 应用
## 扩展功能
### 命令
- `Hello World: Show` - 显示 WebView 面板
### 视图
- 在活动栏中添加了一个 "Hello World" 图标，点击可以打开 WebView 面板
- 侧边栏视图保持状态，切换时不会重新加载（使用 `retainContextWhenHidden: true`）
### WebView 功能
- 发送消息到扩展
- 设置和获取状态
### UI 组件
- 使用 daisyUI 组件库构建美观的用户界面
- 支持亮色/暗色主题切换
- 响应式设计，适应不同大小的窗口
## 构建
```shell
bun run dev
bun run build
bun run preview
bun run copy-python
```
## 技术栈
- [VS Code Extension API](https://code.visualstudio.com/api)
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [daisyUI](https://daisyui.com/)
- [VS Code WebView UI Toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit)