2.9 KiB
2.9 KiB
VSCode翻译插件开发指南
环境准备
1. 安装Node.js
确保已安装Node.js 16+版本:
node --version
2. 安装依赖
npm install
3. 安装开发工具
# 安装VSCode扩展打包工具
npm install -g @vscode/vsce
开发流程
1. 编译代码
# 开发模式(监听文件变化自动编译)
npm run watch
# 生产模式编译
npm run compile
2. 调试扩展
- 按
F5启动扩展开发主机 - 在新窗口中测试扩展功能
- 在原始窗口中查看调试控制台输出
3. 代码检查
确保没有TypeScript错误:
npm run compile
打包发布
1. 本地打包
# 创建VSIX扩展包
vsce package
# 使用优化参数打包
vsce package --allow-missing-repository --allow-star-activation
2. 发布到市场
# 首次发布(需要Azure DevOps账号)
vsce publish
# 更新版本发布
vsce publish minor # 次版本更新
vsce publish patch # 补丁版本更新
3. 版本管理
修改package.json中的版本号:
{
"version": "0.0.2"
}
文件结构说明
vscode-translate-plugin/
├── src/ # 源代码目录
│ ├── extension.ts # 扩展主入口
│ ├── translationService.ts # 翻译服务
│ └── namingFormatter.ts # 命名格式化
├── out/ # 编译输出目录
├── docs/ # 文档目录
├── package.json # 扩展配置
└── tsconfig.json # TypeScript配置
配置项说明
package.json关键配置
activationEvents: 扩展激活事件contributes.commands: 注册命令contributes.menus: 右键菜单配置contributes.keybindings: 快捷键配置contributes.configuration: 用户设置
常用开发命令
# 开发相关
npm run compile # 编译TypeScript
npm run watch # 监听编译
npm run vscode:prepublish # 预发布编译
# 打包相关
vsce package # 打包为VSIX
vsce publish # 发布到市场
vsce ls # 查看包含的文件
调试技巧
1. 查看日志
在VSCode开发者工具中查看控制台输出:
- 帮助 -> 切换开发者工具
- 查看Console标签页的日志
2. 断点调试
在src/extension.ts中设置断点,使用F5启动调试。
3. 测试不同场景
- 测试中文转英文变量名
- 测试英文转中文翻译
- 测试不同命名规范(camelCase、PascalCase、snake_case)
- 测试不同翻译服务(Google、百度)
常见问题解决
1. 扩展不激活
检查activationEvents配置是否正确。
2. 右键菜单不显示
确保when条件正确,如editorHasSelection。
3. 快捷键无效
检查快捷键冲突和when条件。
4. 打包错误
- 检查TypeScript编译错误
- 确保所有依赖已安装
- 检查package.json格式