设置和使用Vega Studio
Vega Studio是一个用于构建Vega应用的集成开发环境 (IDE)，在Visual Studio Code (VS Code) 中作为扩展提供。安装Vega软件开发工具包 (SDK) 时会自动安装此工具，为您提供以下功能：
- 集成的调试工具
- 实时性能监控
- 内置应用优化功能
- Fire TV Stick的直接设备管理功能
- 全面的测试功能
当您安装Vega SDK时，它会自动在VS Code中配置Vega Studio。借助Vega Studio，您可以直接从VS Code命令面板访问所有Vega开发工具和命令。
先决条件
-
打开VS Code，在活动栏中查找Vega扩展图标
，或导航到Code > 设置 > 扩展。 -
在Extensions: Marketplace搜索字段中输入“Vega Studio”。
如果您看到Vega扩展图标，请继续构建您的应用，或学习Vega Studio的基本功能和高级配置选项。
如果您没有看到Vega扩展图标，请继续手动安装Vega Studio。
手动安装Vega Studio
选择以下安装选项之一：
选项1： 从Microsoft Marketplace安装
- 选择Install（安装）。
- 选择Open Visual Studio Code（打开Visual Studio Code）。
- 出现提示时单击Continue。
- 在活动栏中查找Vega扩展图标。
选项2： 从Vega SDK安装
-
验证您的Vega SDK是否已经加入PATH：
export KEPLER_SDK_PATH=<SDK的路径> export PATH=$KEPLER_SDK_PATH/bin:$PATH将
<sdk的路径>替换为实际的目录路径。 -
打开终端，然后输入：
kepler setup-studio --install - 出现提示时单击Reload（重新加载）。
- 在活动栏中查找Vega扩展图标。
了解基本功能
安装Vega Studio后，您可以通过Vega Studio面板访问所有开发工具。
- 打开VS Code。
- 在活动栏中查找Vega扩展图标。
-
单击Vega扩展图标打开Vega Studio面板，其中包含以下部分：
-
Projects（项目）- 创建、管理和组织开发项目
-
Build Modes（构建模式）- 配置调试和发布构建设置
-
Devices（设备）- 管理和监控已连接的设备
-
App Performance Tools（应用性能工具）- 监控和优化应用性能
-
Help and Feedback（帮助和反馈）- 访问文档、教程并提交支持请求
-
管理您的Vega项目
Projects部分列出了您当前的项目以及用于构建、安装或运行的选项。
选择您的构建模式
Build Modes部分可让您在Vega应用的Debug（调试）构建和Release（发布）构建之间进行选择。您的选择适用于所有后续构建，直到对此进行了更改为止。
- Debug模式 - 专为开发和测试而设计。它包括调试工件并启用Metro打包器（React Native的JavaScript bundler），允许通过快速刷新进行实时代码更新。
当您使用Debug（调试）模式时，Vega Studio会自动启用快速刷新。要使用快速刷新，请执行以下操作：
- 在Vega Studio中构建您的应用。
- 在Vega虚拟设备或Fire TV Stick上运行您的应用。
- 更改您的代码。您应该立即在设备上看到更改。
- Release模式 - 创建经过优化的生产就绪代码，用于最终部署和发布。在该模式下会禁用快速刷新等开发功能，删除调试信息，并减少文件大小以提高运行时性能。
Debug和Release模式之间的区别适用于所有Vega应用，包括适用于Vega的React Native应用。Debug模式提供快速刷新等开发工具，而Release模式则针对生产用途对应用进行优化。
查看您的设备
Devices部分显示连接到您的计算机的所有设备（虚拟设备或物理设备）。设备连接或断开时，设备列表会自动更新。
您可以从这个界面启动设备。
选择一台设备来运行项目。
您也可以打开终端会话，直接与设备进行交互。
访问性能监控工具
此部分提供对性能监控工具的访问权限，以优化您的应用。某些工具仅在应用在物理设备上运行时可用。
- Activity Monitor（活动监视器）- 实时监控应用内存和CPU使用情况
- Memory Monitor（内存监视器）- 实时监控应用内存使用情况
- App KPI Visualizer（应用KPI可视化工具）- 衡量关键性能指标并验证您的应用是否符合性能标准
- Chrome Dev Tools（Chrome开发工具）- 检查、调试和分析应用用作内置VS Code调试器的替代方案
提交反馈或问题，查找资源和指南
本节提供以下链接：
-
Feedback（反馈）- 可让您向Vega团队提交反馈或问题
-
Documentation（文档）- Vega开发新手入门资源链接
-
Walkthrough（演练）- 项目设置、构建模式、设备管理和性能工具指南
-
Create bug report（创建错误报告）- 收集有关系统、设备和日志的诊断信息
当您单击Create bug report链接时，它会激活Bug Report（错误报告）工具，该工具收集有关系统、设备和日志的诊断信息。该工具将此类信息以文件形式保存在您的计算机上，您可以在提交支持问题单时附上该文件。该报告包括：
系统信息
- 操作系统详细信息（平台、版本、架构）
- 硬件信息（内存、CPU）
- 环境详情（Node.js版本、SDK版本）
设备信息
- 连接的Vega设备清单
- 设备详情（类型、操作系统、架构）
- 设备状态信息
日志文件
- Vega Studio扩展日志
- React Native应用日志
- Vega SDK日志
- 设备日志（适用于连接的设备）
- 来自设备的最新聚合崩溃报告 (ACR)
保护您的隐私
在提交任何错误报告之前，请检查整个文件，因为它可能包含个人信息，例如用户名、主目录路径、文件路径或其他敏感数据等。检查报告内容并删除任何私人信息，然后再提交。
何时创建错误报告
在以下情况下创建并提交错误报告：
- Vega Studio显示错误或出现意外行为
- Vega Studio崩溃或死机
- 功能无法按预期运行
- 虚拟设备或设备崩溃
如何创建错误报告
- 在Vega Studio中打开Help and Feedback视图。
-
单击Create Bug Report。
系统会执行如下操作：
- 生成一份错误报告文件（这可能需要一分钟）
- 将文件保存到您的主目录中
- 向您显示文件位置
- 打开亚马逊应用商店开发者支持页面
- 亚马逊应用商店开发者支持页面打开后，请填写相关信息。
- 将生成的错误报告文件（大小限制10MB）附加到您的支持问题单中。
如果系统无法生成报告：
- 重启VS Code。
- 重复步骤1-4。
需要帮助？
这些资源可以帮助您解决问题或获得问题答案：
配置高级选项
Vega Studio提供高级设置，用于自定义开发环境和优化工作流程。这些选项可帮助您定制扩展行为，以满足您的特定开发需求。
自动设备检测
Vega Studio会自动更新设备列表以实时显示连接状态。
开启或关闭自动设备检测：
- 转到扩展 > Vega Studio。
- 导航到Vega > Features: Automatic Device Detection（功能：自动设备检测）。
- 选中复选框以打开此功能，或取消选中该复选框以关闭此功能。
构建目标架构优化
Vega Studio通过仅为您的目标设备架构创建工件来优化构建，从而减少了构建时间和程序包大小。
例如，当以Fire TV Stick为目标时：
- ✅ 生成：armv7工件
- ❌ 跳过：x86_64和aarch64工件
开启或关闭构建目标架构优化：
- 转到扩展 > Vega Studio > Settings（设置）。
- 导航到Vega > Features: Build Target Architecture Optimization（功能：构建目标架构优化）。
- 选中复选框以打开此功能，或取消选中该复选框以关闭此功能。
启动选项
Vega Studio让您可以通过在VS Code中配置启动选项，传递选项（参数）至启动应用命令。
配置启动选项：
-
打开VS Code设置：
- Mac： Code > 首选项 > 设置。
- Linux： 前往文件 > 首选项 > 设置。
-
选择您的配置选项：
- User（用户）- 适用于当前用户下的所有项目
- Workspace（工作区）- 适用于工作区下的所有项目
- Project（项目）- 适用于特定项目
例如，在下图中，要配置的设置选项是工作区。
启动选项配置 - 转到扩展 > Vega Studio。
-
在Vega Launch Options（Vega启动选项）部分，输入您的启动选项。
重要须知： VS Code设置是嵌套的。Folder（文件夹）设置会覆盖Workspace（工作区）设置，而后者又会覆盖User（用户）设置。请参阅VS Code设置（仅提供英文版）。
Monorepo支持
“单体存储库” (monorepo) 在单个存储库内包含多个项目或程序包。从v0.20开始，Vega Studio通过npm和Yarn工作区支持采用monorepo布局的程序包（首选Yarn v2布局，但除了nohoist之外也支持v1）。
借助对于monorepo的支持，您可以：
- 打开monorepo程序包
- 将Vega项目导入VS Code工作区
- 高效管理多个项目
monorepo结构通过支持代码共享和重用、集中依赖项管理和简化项目设置来简化开发。
Vega SDK默认包含npm程序包管理器。如果您更喜欢使用Yarn，请参阅设置Yarn工作区。
开启或关闭monorepo支持： 转到设置 > Vega > Features: Monorepo（功能：Monorepo）。
修改monorepo行为：
-
转到设置 > Vega > Features: Monorepo Synchronization（功能：Monorepo同步）。
-
从以下选项中选择：
- Auto（自动）— 当您在VS Code工作区中打开或添加monorepo程序包时，自动检测并在后台导入子程序包。
- Ask for confirmation（要求确认）- 检测子程序包，但在导入之前会征得许可。
注意： 在导入时会安装npm依赖项并导致VS Code工作区重新加载。
了解不同的工作流程
使用monorepo布局程序包时，工作流程在以下方面有所不同：
- 在不使用monorepo程序包的情况下打开工作区 — 在不干扰工作流程的情况下在后台识别程序包布局。
- 使用monorepo程序包打开工作区 — 识别布局、枚举子程序包、检测Vega项目并将其添加到工作区（取决于monorepo支持中所述的monorepo同步设置）。
- 向VS Code工作区添加monorepo程序包 — 功能与使用monorepo程序包打开工作区相同。
-
构建整个monorepo — 使用VS Code默认构建任务。
Vega Studio不支持构建任务的自动配置。您必须手动对其进行配置。在VS Code中，您可以执行以下操作之一：
- 转到Terminal（终端）> Run Build Task（运行构建任务）。
- 按键盘上的Cmd+Shift+B。
- 转到命令面板并输入Tasks: Run Build Task。
- 将Vega项目添加到monorepo — 请参阅将Vega项目添加到monorepo中的说明。
- VS Code Explorer View（VS Code资源管理器视图）— 在monorepo中显示Vega项目，并在VS Code工作区中显示为单独的条目。
- Vega Studio view（Vega Studio视图）— 正常显示Vega项目。
- 其他工作流程 — 与非monorepo工作区相同。
将Vega项目添加到monorepo
- 使用monorepo的程序包目录中的模板创建一个新的Vega项目。
-
更新JS应用程序包依赖项：
// 将 "@prefix/module-name": "file:...../prefix-module-name-0.0.1.tgz" // 替换为 "@prefix/module-name": "*" -
将
node_modules路径添加到metro.config.js：const path = require('path'); const config = { projectRoot: __dirname, watchFolders: [ path.resolve(__dirname, '../../packages'), path.resolve(__dirname, '../../node_modules') ], resolver: { disableHierarchicalLookup: true, nodeModulesPaths: [ path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, '../../node_modules') ] } }; - 删除不必要的锁定文件和程序包工件（尤其是使用Yarn时的package-lock.json文件）。
-
对于带有corepack的
Yarn，请在package.json中指定程序包管理器："packageManager": "yarn@x.y.z"
解决monorepo问题
如果您在Vega Studio中使用monorepo时遇到问题，请参阅解决Monorepo问题以获取解决方案。
相关主题
Last updated: 2025年10月31日
