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

VS Code License TypeScript

你是否遇到过这些困扰:

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

TransPreview 让你可以在 VS Code 中:

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

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

# 方式 1: 从 VS Code Marketplace 安装 (即将上线)
code --install-extension transpreview
# 方式 2: 从 .vsix 文件安装
# 下载最新版本的 .vsix 文件后
code --install-extension transpreview-x.x.x.vsix

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

1. 打开任意文件
2. 点击编辑区右上角的 预览图标 (mirror icon)
3. 预览面板会在右侧显示
4. 点击 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!

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

MIT

• VS Code Extension API
• DeepSeek
• 智谱 AI

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