Voice VSCode - 语音录制插件

一个功能强大的 VS Code 语音录制扩展，提供便捷的音频录制、测试和管理功能

[](https://github.com/fromsko/voice-vscode) [](https://github.com/fromsko/voice-vscode/blob/main/LICENSE) [](https://code.visualstudio.com/) [](https://nodejs.org/)

✨ 功能特点

🔧 音频测试

• 麦克风测试: 实时检测麦克风输入和音量级别
• 设备选择: 支持多设备音频输入选择
• 音频播放: 录制完成后立即预览播放
• 格式支持: WAV 格式输出，保证音质

🎨 用户界面

• 现代化设计: 基于 Tailwind CSS 4 和 DaisyUI 5 构建
• 主题适配: 支持 VS Code 亮色/暗色主题自动切换
• 响应式布局: 适配不同窗口大小
• 直观操作: 简洁的控制界面和快捷命令

🔄 扩展集成

• WebView 通信: 与 VS Code 扩展的双向消息传递
• 状态持久化: 录制状态和配置的持久保存
• 工作区集成: 文件保存到当前工作区
• 命令支持: 通过命令面板快速访问功能

🏗️ 技术架构

前端技术栈

• 框架: React 18 + TypeScript
• 构建工具: Vite (快速开发和构建)
• 样式: Tailwind CSS 4 + DaisyUI 5
• 状态管理: Zustand
• 路由: React Router DOM
• 图标: Lucide React

VS Code 扩展

• 扩展 API: VS Code Extension API
• WebView: VS Code WebView UI Toolkit
• 音频处理: RecordRTC + Web Audio API
• 文件操作: Node.js File System

开发工具

• 类型检查: TypeScript 5.9+
• 代码格式化: Prettier
• 代码检查: ESLint
• 打包工具: VSCE (Visual Studio Code Extension)

📦 项目结构

voice-vscode/
├── 📁 extension/                    # VS Code 扩展代码
│   ├── 📄 index.ts                  # 扩展入口文件
│   ├── 📁 services/                 # 扩展服务层
│   │   └── 📄 WorkspaceHelper.ts    # 工作区辅助功能
│   └── 📁 views/                    # WebView 视图管理
│       ├── 📄 ConfigurationViewProvider.ts  # 配置视图
│       ├── 📄 OpenFolderViewProvider.ts     # 文件夹视图
│       ├── 📄 helper.ts             # WebView 辅助函数
│       ├── 📄 panel.ts              # 主面板管理
│       └── 📄 sidebar.ts            # 侧边栏视图
├── 📁 src/                          # React 应用代码
│   ├── 📄 App.tsx                   # 主应用组件
│   ├── 📄 main.tsx                  # React 入口
│   ├── 📁 pages/                    # 页面组件
│   │   ├── 📄 About.tsx            # 关于页面
│   │   ├── 📄 Audio.tsx            # 音频录制页面
│   │   ├── 📄 Home.tsx             # 首页
│   │   └── 📁 audio/               # 音频功能模块
│   │       ├── 📄 index.tsx        # 音频模块入口
│   │       └── 📁 components/      # 音频组件
│   │           ├── 📄 AudioRecorder.tsx      # 录音器组件
│   │           ├── 📄 AudioTester.tsx        # 音频测试组件
│   │           ├── 📄 MediaAudioTester.tsx   # 媒体音频测试
│   │           ├── 📄 MicTest.tsx           # 麦克风测试
│   │           ├── 📄 SpeechInput.tsx       # 语音输入组件
│   │           ├── 📄 Visualization.tsx     # 音频可视化
│   │           ├── 📄 Controls.tsx          # 控制组件
│   │           ├── 📄 Header.tsx            # 头部组件
│   │           ├── 📄 OutputArea.tsx        # 输出区域
│   │           └── 📄 QuickCommands.tsx     # 快捷命令
│   ├── 📁 store/                    # 状态管理
│   │   └── 📄 index.ts              # Zustand 状态store
│   └── 📁 utils/                    # 工具函数
│       ├── 📄 index.ts              # 通用工具
│       └── 📄 vscode.ts             # VS Code API 工具
├── 📁 assets/                       # 静态资源
│   ├── 📁 images/                   # 图片资源
│   │   ├── 🖼️ voice.png           # 扩展图标
│   │   ├── 🖼️ voice.svg           # 矢量图标
│   │   ├── 🖼️ folder.svg          # 文件夹图标
│   │   └── 🖼️ settings.svg        # 设置图标
│   └── 📁 view/                     # 视图模板
│       └── 📄 base.html             # WebView 基础模板
├── 📄 package.json                  # 项目配置和依赖
├── 📄 tsconfig.json                 # TypeScript 配置
├── 📄 vite.config.ts                # Vite 构建配置
├── 📄 eslint.config.mjs             # ESLint 配置
├── 📄 .prettierrc                   # Prettier 格式化配置
└── 📄 README.md                     # 项目文档

🚀 快速开始

环境要求

• Node.js: >= 18.0.0
• VS Code: >= 1.93.0
• npm/yarn/bun: 任选其一

安装步骤

1. 克隆仓库

   git clone https://github.com/fromsko/voice-vscode.git
   cd voice-vscode
   

2. 安装依赖

   # 使用 npm
   npm install
   
   # 或使用 yarn
   yarn install
   
   # 或使用 bun
   bun install
   

3. 开发模式

   # 启动开发服务器（自动格式化代码）
   npm run dev
   

4. 在 VS Code 中测试

   • 按 F5 启动扩展开发主机
   • 新窗口中按 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (macOS)
   • 输入 "语音录制" 并选择命令

构建和打包

# 格式化代码
npm run format

# 检查代码格式
npm run format:check

# 构建项目（自动格式化 + TypeScript编译 + Vite构建）
npm run build

# 预览构建结果
npm run preview

# 打包成 VSCode 扩展文件 (.vsix)
npm run package

🎯 使用指南

基本操作

1. 打开语音录制面板

   • 点击活动栏中的语音图标
   • 或使用命令面板：Ctrl+Shift+P → "语音录制"

2. 开始录制

   • 点击麦克风按钮开始录制
   • 实时查看音频波形和音量级别
   • 点击停止按钮结束录制

3. 管理录音

   • 设置自定义文件名
   • 选择输出路径
   • 播放预览录音
   • 保存到工作区或下载

高级功能

• 音频测试: 测试麦克风设备和音质
• 主题切换: 自动适配 VS Code 主题
• 状态持久化: 录制状态在会话间保持
• 工作区集成: 录音文件直接保存到项目目录

🛠️ 开发指南

代码规范

项目使用 Prettier 进行代码格式化，配置如下：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": false,
  "jsxSingleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "arrowParens": "avoid"
}

脚本说明

贡献代码

1. Fork 此仓库
2. 创建特性分支：git checkout -b feature/your-feature
3. 提交更改：git commit -am 'Add some feature'
4. 推送到分支：git push origin feature/your-feature
5. 提交 Pull Request

📋 更新日志

v0.1.5 (当前版本)

• ✨ 完整的音频录制功能
• 🎨 现代化 UI 设计
• 🔧 音频设备测试功能
• 📱 响应式布局适配
• 🌓 主题自动切换
• 💾 状态持久化
• 🔄 WebView 与扩展通信

🤝 贡献

欢迎提交 Issues 和 Pull Requests 来帮助改进这个项目！

📄 许可证

MIT License

🙏 致谢

• VS Code Extension API
• React
• Vite
• Tailwind CSS
• DaisyUI
• RecordRTC
• Zustand