TransPreview

在 VS Code 中预览文件并使用 AI 进行翻译。专为阅读英文文档和技术文章设计。

✨ 为什么选择 TransPreview？

痛点

你是否遇到过这些困扰：

📖 阅读英文技术文档很吃力 - 尤其是 Claude Code、React、Vue 等 SKILL 文档
🌐 频繁切换翻译工具打断思路 - 复制粘贴到浏览器翻译，再返回编辑器
📋 想在 VS Code 里直接看文档 - 不想切换窗口
🤖 想用 AI 翻译但不想离开编辑器

解决方案

TransPreview 让你可以在 VS Code 中：

🔍 一键预览 - 在编辑区旁边打开预览面板
🌐 AI 翻译 - 支持多家国产 AI 服务，快速准确
📝 实时同步 - 文件修改时预览自动更新
🎨 主题适配 - 自动跟随 VS Code 主题颜色

📸 功能演示

使用说明

点击编辑区右上角的 预览图标 打开预览面板
预览面板会在右侧显示文件内容
点击 Translate 按钮进行 AI 翻译

🚀 快速开始

安装

# 方式 1: 从 VS Code Marketplace 安装 (即将上线)
code --install-extension transpreview

# 方式 2: 从 .vsix 文件安装
# 下载最新版本的 .vsix 文件后
code --install-extension transpreview-x.x.x.vsix

配置 API Key

打开 VS Code 设置 (Cmd + , / Ctrl + ,)
搜索 TransPreview
配置以下选项：
- TransPreview: Translator: 选择翻译服务 (推荐 DeepSeek)
- TransPreview: Api Key: 填入你的 API Key
- TransPreview: Auto Translate: 是否打开预览时自动翻译

获取 API Key

服务	官网	价格	速度
DeepSeek	deepseek.com	¥1/百万token	⚡⚡⚡
智谱 AI	open.bigmodel.cn	便宜	⚡⚡⚡
通义千问	aliyun.com	便宜	⚡⚡
OpenAI	openai.com	较贵	⚡⚡

使用方法

打开任意文件
点击编辑区右上角的 预览图标 (mirror icon)
预览面板会在右侧显示
点击 Translate 按钮进行翻译

🛠️ 开发

# 克隆仓库
git clone https://github.com/maoruibin/TransPreview.git
cd TransPreview

# 安装依赖
npm install

# 编译
npm run compile

# 监听模式
npm run watch

# 按 F5 启动调试

📦 打包发布

# 安装 vsce
npm install -g @vscode/vsce

# 打包
npm run package

# 发布到 VS Code Marketplace
vsce publish

🗺️ 路线图

[ ] 语法高亮支持
[ ] 代码块美化
[ ] 翻译缓存
[ ] 多语言翻译方向智能检测
[ ] 支持更多翻译服务
[ ] 发布到 VS Code Marketplace

👨‍💻 作者

咕咚同学 - Android 开发工程师 / 独立开发者 / inbox 笔记作者

GitHub: @maoruibin

📮 公众号

关注我的公众号，获取更多开发技巧和工具分享：

公众号二维码

🤝 贡献

欢迎提交 Issue 和 Pull Request！

Fork 本仓库
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

📄 许可证

MIT

🙏 致谢

如果你觉得这个项目有用，请给一个 ⭐ Star！