如何给PicGo贡献代码本地开发环境搭建到提交第一个PR的完整指南【免费下载链接】PicGo高效创作者的最佳图片上传工具。实现图片一键上传并自动获取链接提升创作效率。它支持主流图床提供拖拽、剪贴板粘贴等多种上传方式具备自动复制链接、自定义格式等功能且拥有强大插件生态可扩展更多功能。项目地址: https://gitcode.com/Molunerfinn/PicGoPicGo 是一款面向创作者的开源图片上传工具支持一键上传图片并自动复制 Markdown、HTML 等格式的链接。想学习PicGo 代码贡献、参与这个开源项目吗这篇完整指南将带你走完全流程从 PicGo 开发环境搭建、理解项目结构到规范提交并创建你的第一个 PR即使你是初学者也能跟上。一、认识 PicGo 项目结构PicGo 是基于 Electron React 的桌面客户端源码全部位于src/目录按运行进程清晰划分目录职责典型文件src/main/主进程系统能力、上传核心、窗口管理apis/ 目录src/renderer/渲染进程界面与交互无 Node.js 能力components/ 目录src/universal/两个进程共享的类型、事件、工具events/constants.ts 记住这个原则Node.js 相关代码永远不能直接写在渲染进程需要通过 IPC 事件由主进程代理执行例如在 picgoCoreIPC.ts 中添加对应处理。更多架构说明可参考 AGENTS.md 与官方贡献指南 CONTRIBUTING.md。二、PicGo开发环境搭建4步准备工作1. 安装基础工具Node.js Git建议熟悉基本的 npm 用法包管理器必须使用pnpm项目不支持npm installpnpm-lock.yaml 已锁定依赖macOS 用户需安装 XcodeWindows 用户需安装 Visual Studio2. 获取代码仓库git clone https://gitcode.com/Molunerfinn/PicGo cd PicGo3. 安装项目依赖pnpm install依赖定义在 package.json 中安装时会自动执行 Electron 构建相关的后置脚本。4. 熟悉开发工具链构建由 electron-vite 驱动配置文件为 electron.vite.config.ts测试基于 Vitest见 vitest.config.ts。三、安装依赖并启动本地开发服务器pnpm run dev启动后 PicGo 会以开发模式运行支持热更新修改代码保存即可看到效果️ Windows 下启动后托盘图标出现在系统托盘右下角⚠️ 开发模式偶发不稳定若进程崩溃CtrlC停止后重新执行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.yml3. 代码风格红线遵循 ESLint 规范Standard 风格 TypeScript React 规则TypeScript 编写严禁使用as any日期格式化统一使用dayjs页面样式优先使用 Tailwind 工具类五、本地自检提交前必跑的命令pnpm check # TypeScript 类型检查 ESLint 自动修复 pnpm test # 运行 Vitest 单元测试测试用例位于 src/tests/ 目录按main/、renderer/、universal/分层组织。新增或修改逻辑时建议参考同层现有测试补充对应用例。六、提交你的第一个PR1. 清理代码删除多余注释与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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何给PicGo贡献代码本地开发环境搭建到提交第一个PR的完整指南【免费下载链接】PicGo高效创作者的最佳图片上传工具。实现图片一键上传并自动获取链接提升创作效率。它支持主流图床提供拖拽、剪贴板粘贴等多种上传方式具备自动复制链接、自定义格式等功能且拥有强大插件生态可扩展更多功能。项目地址: https://gitcode.com/Molunerfinn/PicGoPicGo 是一款面向创作者的开源图片上传工具支持一键上传图片并自动复制 Markdown、HTML 等格式的链接。想学习PicGo 代码贡献、参与这个开源项目吗这篇完整指南将带你走完全流程从 PicGo 开发环境搭建、理解项目结构到规范提交并创建你的第一个 PR即使你是初学者也能跟上。一、认识 PicGo 项目结构PicGo 是基于 Electron React 的桌面客户端源码全部位于src/目录按运行进程清晰划分目录职责典型文件src/main/主进程系统能力、上传核心、窗口管理apis/ 目录src/renderer/渲染进程界面与交互无 Node.js 能力components/ 目录src/universal/两个进程共享的类型、事件、工具events/constants.ts 记住这个原则Node.js 相关代码永远不能直接写在渲染进程需要通过 IPC 事件由主进程代理执行例如在 picgoCoreIPC.ts 中添加对应处理。更多架构说明可参考 AGENTS.md 与官方贡献指南 CONTRIBUTING.md。二、PicGo开发环境搭建4步准备工作1. 安装基础工具Node.js Git建议熟悉基本的 npm 用法包管理器必须使用pnpm项目不支持npm installpnpm-lock.yaml 已锁定依赖macOS 用户需安装 XcodeWindows 用户需安装 Visual Studio2. 获取代码仓库git clone https://gitcode.com/Molunerfinn/PicGo cd PicGo3. 安装项目依赖pnpm install依赖定义在 package.json 中安装时会自动执行 Electron 构建相关的后置脚本。4. 熟悉开发工具链构建由 electron-vite 驱动配置文件为 electron.vite.config.ts测试基于 Vitest见 vitest.config.ts。三、安装依赖并启动本地开发服务器pnpm run dev启动后 PicGo 会以开发模式运行支持热更新修改代码保存即可看到效果️ Windows 下启动后托盘图标出现在系统托盘右下角⚠️ 开发模式偶发不稳定若进程崩溃CtrlC停止后重新执行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.yml3. 代码风格红线遵循 ESLint 规范Standard 风格 TypeScript React 规则TypeScript 编写严禁使用as any日期格式化统一使用dayjs页面样式优先使用 Tailwind 工具类五、本地自检提交前必跑的命令pnpm check # TypeScript 类型检查 ESLint 自动修复 pnpm test # 运行 Vitest 单元测试测试用例位于 src/tests/ 目录按main/、renderer/、universal/分层组织。新增或修改逻辑时建议参考同层现有测试补充对应用例。六、提交你的第一个PR1. 清理代码删除多余注释与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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
