在 awesome-copilot 中搭建 Power Apps Code Apps 开发环境脚手架、PAC CLI 与最佳实践【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilotPower Apps Code Apps 是微软 Power Platform 的代码优先code-first开发能力开发者用 TypeScript、React 与 Vite 构建自定义 Web 应用同时无缝接入 Power Platform 的 1,500 连接器、Microsoft Entra 身份验证和托管基础设施。本文围绕 awesome-copilot 仓库中的 power-apps-code-apps 插件完整讲解该插件的安装方式、power-apps-code-app-scaffold脚手架的实战用法、power-platform-expert专家的咨询能力以及配套开发指令中的工程规范读完即可在 Copilot CLI / VS Code 中一键搭建并部署一个可运行的 Code Apps 项目。插件概览面向 Code Apps 开发的完整工具包power-apps-code-apps是 awesome-copilot社区贡献的 GitHub Copilot 扩展集合中的一个主题插件定位是 Complete toolkit for Power Apps Code Apps development即围绕 Power Apps Code Apps 开发的完整工具包覆盖项目脚手架project scaffolding、开发标准development standards与专家指导expert guidance三个层面。其核心价值是让开发者代码优先地构建应用同时完整继承 Power Platform 平台能力。该插件面向的场景非常明确使用Vite React TypeScript技术栈、以Power Apps SDKmicrosoft/power-apps对接连接器、通过PAC CLI完成认证、数据源与部署管理的 Code Apps 项目。插件将「生成骨架、专家答疑、规范约束」三类能力打包为一次安装、随取随用。安装与启用在 Copilot CLI 中执行一条命令即可完成安装插件仓库本身是 awesome-copilot 默认的插件市场无需额外配置 marketplacecopilot plugin install power-apps-code-appsawesome-copilot安装后的使用入口主要有两个Copilot CLI在交互式会话中可用/plugin marketplace browse awesome-copilot浏览插件市场/plugin类斜杠命令Slash Command可直接触发插件能力VS Code打开扩展搜索视图并输入agentPlugins浏览可用插件或通过命令面板运行Chat: Plugins。插件元数据定义在 plugins/power-apps-code-apps/plugin.json 中它声明了插件名、版本1.0.0、MIT 许可证、关键字power-apps、power-platform、typescript、react、code-apps、dataverse、connectors并通过com.github.awesome-copilot扩展点挂载了 1 个 Agent 与 1 个 Skill。这意味着安装该插件实际获得的是三个协作组件命令、Agent 与底层指令规范。插件提供的命令Slash Commands插件注册的斜杠命令如下CommandDescription/power-apps-code-apps:power-apps-code-app-scaffold使用 PAC CLI 设置、SDK 集成和连接器配置脚手架搭建一个完整的 Power Apps Code App 项目该命令对应插件内置的 Skill——skills/power-apps-code-app-scaffold/SKILL.md。Skill 描述为 Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration即触发后由 AI 以资深 Power Platform 开发者的身份按照微软官方最佳实践与当前预览版能力从零生成一整套可运行的 Code Apps 工程。下文将拆解 Skill 的完整执行路径。核心能力一power-apps-code-app-scaffold项目脚手架Skill 的输入是任务指令输出是完整交付物项目骨架、可运行的示例应用含连接器集成、文档与部署脚本。其脚手架步骤分为六个阶段。1. 项目初始化搭建 Vite React TypeScript 工程并针对 Code Apps 做配置项目必须运行在3000 端口Power Apps SDK 的硬性要求安装并配置 Power Apps SDKSkill 记录的版本为microsoft/power-apps ^0.3.1配套开发指令 instructions/power-apps-code-apps.instructions.md 中记录为^1.0.3实际版本以当前发布为准使用pac code init完成 PAC CLI 层面的项目初始化。2. 必需配置文件脚手架会生成以下核心配置文件vite.config.ts按 Power Apps Code Apps 要求配置构建需设置base: ./与路径别名如指向./srcpower.config.json由 PAC CLI 生成的 Power Platform 元数据文件PowerProvider.tsxReact Provider 组件负责 Power Platform 初始化tsconfig.json与 Power Apps SDK 兼容的 TypeScript 配置package.json开发与部署脚本。3. 目录结构Skill 要求生成清晰分层、关注点分离的目录结构src/ ├── components/ # Reusable UI components ├── services/ # Generated connector services (created by PAC CLI) ├── models/ # Generated TypeScript models (created by PAC CLI) ├── hooks/ # Custom React hooks for Power Platform integration ├── utils/ # Utility functions ├── types/ # TypeScript type definitions ├── PowerProvider.tsx # Power Platform initialization component └── main.tsx # Application entry point配套指令 instructions/power-apps-code-apps.instructions.md 进一步强调生成文件必须与手写代码物理隔离——PAC CLI 生成的连接器服务与模型应放在generated/services/与generated/models/下命名统一文件用 kebab-case、组件用 PascalCase避免每次重新生成时污染自定义代码。4. 开发脚本Skill 要求按微软官方示例配置package.json脚本核心是使用concurrently并行启动 Vite 与 PAC 开发服务ScriptCommand说明devconcurrently vite pac code run并行运行 Vite 与 PAC 本地运行服务buildtsc -b vite buildTypeScript 编译后执行 Vite 构建previewvite preview生产构建预览linteslint .代码质量检查5. 示例实现要求Skill 要求示例应用至少演示通过 PowerProvider 组件完成 Power Platform 认证与初始化连接至少一个受支持连接器推荐 Office 365 Users使用 PAC CLI 生成的 TypeScript 模型与服务基于 try/catch 的错误处理与加载状态使用 Fluent UI React 组件构建响应式界面遵循官方示例PowerProvider 使用useEffect与异步初始化的正确实现。Office 365 Users 连接器的典型用法如下Skill 中的示例// Example: Get current user profile const profile await Office365UsersService.MyProfile_V2(id,displayName,jobTitle,userPrincipalName); // Example: Get user photo const photoData await Office365UsersService.UserPhoto_V2(profile.data.id);6. 交付文档脚手架同时要求生成完整的 README.md内容必须包含前置条件与安装步骤、认证与环境配置、连接器与数据源配置、本地开发与部署流程、常见问题排查Troubleshooting。核心能力二PAC CLI 命令集与官方支持连接器PAC CLI 关键命令Skill 明确要求脚手架中包含以下 PAC CLI 命令的完整用法它们构成 Code Apps 生命周期的主干命令用途pac auth create --environment {environment-id}针对指定环境建立认证pac env select --environment {environment-url}选择目标环境pac code init --displayName App Name初始化 Code App 项目pac connection list列出可用连接pac code add-data-source -a {api-name} -c {connection-id}添加连接器数据源pac code push部署到 Power Platform配套指令的故障排查章节还补充了常用维护命令pac auth list检查认证状态、pac auth clear清除后再pac auth create重建认证、pac env list确认环境选择。官方支持的连接器Skill 明确限定脚手架应优先聚焦以下官方支持连接器SQL Server含 Azure SQL完整 CRUD 与存储过程SharePoint文档库、列表与站点Office 365 Users个人资料、用户照片、组成员关系Office 365 Groups团队信息与协作Azure Data Explorer分析与大数据查询OneDrive for Business文件存储与共享Microsoft Teams团队协作与通知MSN Weather天气数据集成Microsoft Translator V2多语言翻译Dataverse完整 CRUD、关系与业务逻辑。前置条件清单Skill 要求脚手架输出中明确列出开发前置条件Visual Studio Code 及 Power Platform Tools 扩展Node.js LTS推荐 v18.x 或 v20.xGit 版本控制最新版 Power Platform CLIPAC CLI已启用 Code Apps 的 Power Platform 环境需管理员设置最终用户需 Power Apps Premium 许可证若使用 Azure SQL 等 Azure 连接器需要 Azure 账户。核心能力三power-platform-expert专家 Agent插件同时挂载了 agents/power-platform-expert.agent.md 专家 Agent其定位是 Power Platform expert providing guidance on Code Apps, canvas apps, Dataverse, connectors, and Power Platform best practices模型指定为 GPT-4.1。Agent 的能力范围横跨 Code Apps、Canvas Apps、Model-Driven Apps、Dataverse含多对多与多态查找、1,500 连接器、Power Automate、Power Platform ALM、安全治理以及 PCF 控件集成、多环境流水线、渐进式 Web 应用等企业级模式。其回复采用固定结构Quick Answer即时方案→ Implementation Details逐步实现→ Best Practices最佳实践→ Potential Issues常见陷阱→ Additional Resources补充资源→ Next Steps后续步骤。特别值得关注的是 Agent 内置的 Current Power Platform Context它要求回答任何 Code Apps 问题时都主动说明当前预览状态与限制始终强调 3000 端口要求、verbatimModuleSyntax: false、PAC CLI 语法、PowerProvider 实现模式与连接器认证流程——这些约束与 Skill、Instructions 保持一致保证不同入口产出的工程规范同源。配套开发指令工程规范与高级模式插件底层的 instructions/power-apps-code-apps.instructions.md 是一份独立的开发标准文档通过 frontmatter 的applyTo自动作用于**/*.{ts,tsx,js,jsx}、vite.config.*、package.json、tsconfig.json与power.config.json在编码过程中持续约束 AI 输出质量。其关键内容如下。TypeScript 配置要点Power Apps SDK 兼容性是配置的核心矛盾点指令给出推荐配置并强调两点必须设置verbatimModuleSyntax: false否则与 SDK 的模块导入方式冲突开启严格模式strict: true并配合noUnusedLocals、noUnusedParameters、noFallthroughCasesInSwitch等检查。推荐配置骨架完整版见 instructions/power-apps-code-apps.instructions.md{ compilerOptions: { target: ES2020, lib: [ES2020, DOM, DOM.Iterable], module: ESNext, skipLibCheck: true, verbatimModuleSyntax: false, moduleResolution: bundler, isolatedModules: true, noEmit: true, jsx: react-jsx, strict: true, baseUrl: ., paths: { /*: [./src/*] } } }PowerProvider 实现模式v1.0 关键变化指令给出一个重要提醒v1.0 版本的应用不再需要等待 SDK 初始化PowerProvider 可以是一个非常轻量的透传组件import type { ReactNode } from react; export default function PowerProvider({ children }: { children: ReactNode }) { return {children}/; }同时建议在自定义场景中按需实现更完整的异步初始化useEffect async 错误处理模式。高级集成模式指令还覆盖了若干超出基础脚手架的企业级模式可供扩展参考PCF 控件集成通过包装组件嵌入 Power Apps Component Framework 控件如数据可视化图表并处理事件与数据绑定Power BI 嵌入式分析使用powerbi-client-react嵌入报表支持动态过滤与导出AI Builder 集成调用表单处理、目标检测、情感分析等认知服务Power Virtual Agents 集成基于 botframework DirectLine / WebChat 嵌入聊天机器人离线优先架构Service Worker 注册 IndexedDB 本地存储 冲突解决与后台同步支持渐进式 Web 应用PWA多环境部署流水线按环境拆分配置文件config/development.json等在 Azure DevOps 中使用 PowerPlatformToolInstaller2 / PowerPlatformPublishCustomizations2 等任务自动化 dev → test → staging → prod 晋升敏感配置放 Azure Key VaultDataverse 高级关系多对多中间表、多态查找Account/Contact 的customerType分支、$expand/$filter复杂查询UI/UX 模式设计系统组件库、深浅色主题ThemeProvider CSS 变量、容器查询响应式、Framer Motion 动效、ARIA 无障碍含 axe-core 自动化测试、react-intl 国际化。已知限制当前预览阶段指令与 Skill、Agent 三方一致地列出 Code Apps 预览期限制开发前务必知悉Content Security PolicyCSP尚未支持Storage SAS IP 限制不支持无 Power Platform Git 集成Dataverse 解决方案支持但 solution packager 与源码集成能力有限Application Insights 需通过 SDK logger 配置无原生内建集成。对应变通手段包括采用替代错误跟踪方案、手动部署工作流、外部高级分析工具并为未来支持的功能迁移做好规划。开发工作流与故障排查速查综合 Skill 与指令一个标准的 Code Apps 迭代闭环是pac auth create --environment {environment-id}建立认证pac code init --displayName App Name初始化项目pac code add-data-source -a {api-name} -c {connection-id}挂接数据源npm run dev本地开发Vite pac code run并行npm run buildtsc -b vite build产出构建pac code push部署到 Power Platform。常见问题的处置对照摘自 instructions/power-apps-code-apps.instructions.md3000 端口被占netstat -ano | findstr :3000定位进程后taskkill /PID {PID} /F认证失败用pac auth list核对环境与权限必要时pac auth clear后重建依赖安装失败npm cache clean --force后重装TypeScript 编译错误优先检查verbatimModuleSyntax与 SDK 兼容性PowerProvider 异常确认 v1.0 应用不阻塞等待 SDK 初始化App timed out 运行时错误确认已执行npm run build且部署产物有效连接器权限错误检查同意流程与管理员权限。最佳实践速览综合三方资源Code Apps 开发的十条基线规范如下详见 instructions/power-apps-code-apps.instructions.md 与 Skill 的 Best Practices 节遵循微软官方文档与最佳实践紧跟预览能力全程 TypeScript保证类型安全与开发体验实现完善的错误处理与用户反馈错误边界、重试逻辑、有意义的错误信息敏感数据存放在数据源中绝不写入应用代码遵循安全最佳实践与 Power Platform 数据丢失防护DLP策略使用 PAC CLI 生成的 service/model保证类型安全的连接器操作本地开发固定使用 3000 端口vite.config.ts设置base: ./与路径别名采用concurrently配置并行开发脚本落实全面测试策略单测、React Testing Library、连接器 Mock、集成测试遵循 DevOps 与多环境部署实践为未来功能迁移预留空间。总结power-apps-code-apps插件是 awesome-copilot 中 Code Apps 开发能力的最小闭环一条命令完成安装一个斜杠命令触发 项目脚手架一个 专家 Agent 提供随问随答的架构级咨询一份 开发指令 在编码全程兜底规范。三者共享同一套技术事实——Vite React TypeScript、PAC CLI、Power Apps SDK、3000 端口与verbatimModuleSyntax: false——确保从生成骨架到持续迭代再到部署上线的每个环节都遵循一致的标准。对于希望在 Power Platform 上以代码优先方式构建 Web 应用的团队该插件是开箱即用的起点。【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考