如何给PicGo贡献代码：本地开发环境搭建到提交第一个PR的完整指南

如何给PicGo贡献代码：本地开发环境搭建到提交第一个PR的完整指南

【免费下载链接】PicGo高效创作者的最佳图片上传工具。实现图片一键上传并自动获取链接，提升创作效率。它支持主流图床，提供拖拽、剪贴板粘贴等多种上传方式，具备自动复制链接、自定义格式等功能，且拥有强大插件生态可扩展更多功能。项目地址: https://gitcode.com/Molunerfinn/PicGo

PicGo 是一款面向创作者的开源图片上传工具，支持一键上传图片并自动复制 Markdown、HTML 等格式的链接。想学习PicGo 代码贡献、参与这个开源项目吗？这篇完整指南将带你走完全流程：从 PicGo 开发环境搭建、理解项目结构，到规范提交并创建你的第一个 PR，即使你是初学者也能跟上。

一、认识 PicGo 项目结构

PicGo 是基于 Electron + React 的桌面客户端，源码全部位于src/目录，按运行进程清晰划分：

💡 记住这个原则：Node.js 相关代码永远不能直接写在渲染进程，需要通过 IPC 事件由主进程代理执行，例如在 picgoCoreIPC.ts 中添加对应处理。

更多架构说明可参考 AGENTS.md 与官方贡献指南 CONTRIBUTING.md。

二、PicGo开发环境搭建：4步准备工作

1. 安装基础工具

• Node.js + Git（建议熟悉基本的 npm 用法）
• 包管理器必须使用pnpm（项目不支持npm install，pnpm-lock.yaml 已锁定依赖）
• macOS 用户需安装 Xcode；Windows 用户需安装 Visual Studio

2. 获取代码仓库

git clone https://gitcode.com/Molunerfinn/PicGo cd PicGo

3. 安装项目依赖

pnpm install

依赖定义在 package.json 中，安装时会自动执行 Electron 构建相关的后置脚本。

4. 熟悉开发工具链

构建由 electron-vite 驱动，配置文件为 electron.vite.config.ts；测试基于 Vitest，见 vitest.config.ts。

三、安装依赖并启动本地开发服务器

pnpm run dev

启动后 PicGo 会以开发模式运行，支持热更新，修改代码保存即可看到效果：

• 🖥️ Windows 下，启动后托盘图标出现在系统托盘右下角
• ⚠️ 开发模式偶发不稳定，若进程崩溃，Ctrl+C停止后重新执行pnpm run dev即可
• 📦 如需本地打包发布产物，执行pnpm run build，产物输出到dist/目录

网络不稳定导致 Electron 二进制下载失败时，可先设置ELECTRON_MIRROR环境变量指向国内镜像再构建。

四、新增代码该放哪里：PicGo代码规范速览

写代码前先对齐规范，PR 才能一次通过。以下是 CONTRIBUTING.md 的核心要点：

1. 代码归属原则

• 仅主进程使用 → 放src/main/
• 仅渲染进程使用 → 放src/renderer/
• 两进程共用 → 放src/universal/
• 所有跨进程事件名统一注册在 src/universal/events/constants.ts
• 全局类型定义放在 src/universal/types/

2. 国际化（i18n）要求

所有用户可见文案必须使用 i18n 键，禁止硬编码字符串：

• 渲染进程使用$T('KEY')（来自 src/renderer/i18n/index.ts）
• 主进程使用T('KEY')（来自 src/main/i18n/index.ts）
• 新增键时同步更新public/i18n/下的语言文件，至少包含 en.yml、zh-CN.yml

3. 代码风格红线

• 遵循 ESLint 规范（Standard 风格 + TypeScript + React 规则），TypeScript 编写，严禁使用as any
• 日期格式化统一使用dayjs
• 页面样式优先使用 Tailwind 工具类

五、本地自检：提交前必跑的命令

pnpm check # TypeScript 类型检查 + ESLint 自动修复 pnpm test # 运行 Vitest 单元测试

测试用例位于 src/tests/ 目录，按main/、renderer/、universal/分层组织。新增或修改逻辑时，建议参考同层现有测试补充对应用例。

六、提交你的第一个PR

1. 清理代码：删除多余注释与console.log等调试代码。

2. 规范化提交

git add . && pnpm cz

该命令会唤起 PicGo 的交互式提交规范工具，按提示填写类型与描述，保证提交信息符合约定式规范（commitlint 已配置校验）。

3. 创建 PR 时请包含：

• ✅ 变更说明，并关联对应的 issue
• ✅ 界面变更附截图或录屏
• ✅ 说明验证方式（开发模式运行、构建、测试均通过）

🎉 完成以上步骤，你的第一个 PicGo 开源贡献 PR 就提交出去了！从开发环境搭建到代码合入，你现在已完整走通 PicGo 的贡献流程。

关键文件速查：贡献指南 CONTRIBUTING.md ｜ 架构与规范 AGENTS.md ｜ 依赖与脚本 package.json ｜ 构建配置 electron-builder.config.ts

【免费下载链接】PicGo高效创作者的最佳图片上传工具。实现图片一键上传并自动获取链接，提升创作效率。它支持主流图床，提供拖拽、剪贴板粘贴等多种上传方式，具备自动复制链接、自定义格式等功能，且拥有强大插件生态可扩展更多功能。项目地址: https://gitcode.com/Molunerfinn/PicGo