设置和使用Vega Studio

“Vega Studio”，Visual Studio Code (VS Code) 中的一个扩展，用于构建Vega应用。安装Vega软件开发工具包 (SDK) 时会自动安装此工具，为您提供以下功能：

• 集成的调试工具
• 实时性能监控
• 内置应用优化功能
• Fire TV Stick的直接设备管理功能
• 全面的测试功能

当您安装Vega SDK时，它会自动在VS Code中配置Vega Studio。借助Vega Studio，您可以直接从VS Code命令面板访问所有Vega开发工具和命令。

​

先决条件

1. 打开VS Code，在活动栏中查找Vega扩展图标，或导航到Code > 设置 > Extensions（扩展）。
2. 在Extensions: Marketplace搜索字段中输入“Vega Studio”。 如果您看到Vega扩展图标，请继续构建您的应用，或学习Vega Studio的基本功能和高级配置选项。 如果您没有看到Vega扩展图标，请继续手动安装Vega Studio。

​

手动安装Vega Studio

选择以下安装选项之一：

​

选项1：从Microsoft Marketplace安装

1. 选择Install（安装）。
2. 选择Open Visual Studio Code（打开Visual Studio Code）。
3. 出现提示时选择Continue（继续）。
4. 在活动栏中查找Vega扩展图标。

​

选项2：从Vega SDK安装

1. 验证您的Vega SDK是否已经加入PATH：
   export KEPLER_SDK_PATH=<SDK的路径>
   export PATH=$KEPLER_SDK_PATH/bin:$PATH
   
   将替换为您实际的目录路径。
2. 打开终端，然后输入：
   kepler setup-studio --install
   
3. 出现提示时，选择Reload（重新加载）。
4. 在活动栏中查找Vega扩展图标。

​

了解基本功能

安装Vega Studio后，您可以通过Vega Studio面板访问所有开发工具。

1. 打开VS Code。
2. 在活动栏中查找Vega扩展图标。
3. 选择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会自动启用快速刷新。要使用快速刷新，请执行以下操作：

1. 在Vega Studio中构建您的应用。
2. 在Vega虚拟设备或Fire TV Stick上运行您的应用。
3. 更改您的代码。您应该立即在设备上看到更改。
   • 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崩溃或死机
• 功能无法按预期运行
• 虚拟设备或设备崩溃

​

如何创建错误报告

1. 在Vega Studio中打开Help and Feedback视图。
2. 选择Create Bug Report。 系统会执行如下操作：
   • 生成一份错误报告文件（这可能需要一分钟）
   • 将文件保存到您的主目录中
   • 向您显示文件位置
   • 打开亚马逊应用商店开发者支持页面
3. 亚马逊应用商店开发者支持页面打开后，请填写相关信息。
4. 将生成的错误报告文件（大小限制10MB）附加到您的支持问题单中。

如果系统无法生成报告：

1. 重启VS Code。
2. 重复步骤1-4。

​

需要帮助？

这些资源可以帮助您解决问题或获得问题答案：

• 创建支持问题单以直接从亚马逊支持获得帮助
• 使用DevAssistant查找所需的信息
• 访问社区论坛，查看其他开发者是否遇到过类似的问题

​

配置高级选项

Vega Studio提供高级设置，用于自定义开发环境和优化工作流程。这些选项可帮助您定制扩展行为，以满足您的特定开发需求。

​

自动设备检测

Vega Studio会自动更新设备列表以实时显示连接状态。 开启或关闭自动设备检测：

1. 转到Extensions > Vega Studio。
2. 导航到Vega > Features: Automatic Device Detection（功能：设备自动检测）。
3. 选中复选框以打开此功能，或取消选中该复选框以关闭此功能。

​

构建目标架构优化

Vega Studio通过仅为您的目标设备架构创建工件来优化构建，从而减少了构建时间和程序包大小。 例如，当以Fire TV Stick为目标时：

• ✅ 生成：armv7工件
• ❌ 跳过：x86_64和aarch64工件

开启或关闭构建目标架构优化：

1. 转到Extensions > Vega Studio > Settings。
2. 导航到Vega > Features: Build Target Architecture Optimization（功能：构建目标架构优化）。
3. 选中复选框以打开此功能，或取消选中该复选框以关闭此功能。

​

启动选项

Vega Studio让您可以通过在VS Code中配置启动选项，传递选项（参数）至启动应用命令。 配置启动选项：

1. 打开VS Code设置：
   • Mac： Code > 首选项 > 设置。
   • Linux： 前往文件 > 首选项 > 设置。
2. 选择您的配置选项：
   • User（用户）- 适用于当前用户下的所有项目
   • Workspace（工作区）- 适用于工作区下的所有项目
   • Project（项目）- 适用于特定项目
   例如，在下图中，要配置的设置选项是工作区。
3. 转到Extensions > Vega Studio。
4. 在Vega Launch Options（Vega启动选项）部分，输入您的启动选项。

​

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支持

转到Settings > Vega > Features: Monorepo（功能：Monorepo）。

​

修改monorepo行为

1. 转到Settings > Vega > Features: Monorepo Synchronization（功能：Monorepo同步）。
2. 从以下选项中选择：
   • Auto（自动）—当您在VS Code工作区中打开或添加monorepo程序包时，自动检测并在后台导入子程序包。
   • Ask for confirmation（要求确认）– 检测子程序包，但在导入之前会征得许可。

​

了解不同的工作流程

使用monorepo布局程序包时，工作流程在以下方面有所不同：

1. 在不使用monorepo程序包的情况下打开工作区—在不干扰工作流程的情况下在后台识别程序包布局。
2. 使用monorepo程序包打开工作区—识别布局、枚举子程序包、检测Vega项目并将其添加到工作区（取决于monorepo支持中所述的monorepo同步设置）。
3. 向VS Code工作区添加monorepo程序包—功能与使用monorepo程序包打开工作区相同。
4. 构建整个monorepo—使用VS Code默认构建任务。 Vega Studio不支持构建任务的自动配置。您必须手动对其进行配置。在VS Code中，您可以执行以下操作之一：
   • 转到Terminal（终端）> Run Build Task（运行构建任务）。
   • 按键盘上的Cmd+Shift+B。
   • 转到命令面板并输入Tasks: Run Build Task。
5. 将Vega项目添加到monorepo—请参阅将Vega项目添加到monorepo中的说明。
6. VS Code Explorer View（VS Code资源管理器视图）—在monorepo中显示Vega项目，并在VS Code工作区中显示为单独的条目。
7. Vega Studio view（Vega Studio视图）—正常显示Vega项目。
8. 其他工作流程—与非monorepo工作区相同。

​

将Vega项目添加到monorepo

1. 使用monorepo的程序包目录中的模板创建一个新的Vega项目。
2. 更新JS应用程序包依赖项：
   // 将
   "@prefix/module-name": "file:...../prefix-module-name-0.0.1.tgz"
   // 替换为
   "@prefix/module-name": "*"
   
3. 将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')
      ]
      }
   };
   
4. 删除不必要的锁定文件和程序包工件（尤其是使用Yarn时的package-lock.json文件）。
5. 对于带有corepack的Yarn，请在package.json中指定程序包管理器：
   "packageManager": "yarn@x.y.z"
   

​

解决monorepo问题

如果您在Vega Studio中使用monorepo时遇到问题，请参阅解决Monorepo问题以获取解决方案。

​

相关主题

• Vega Studio命令
• Vega性能CLI
• 💬 社区：检查来自Vega应用的JS跟踪

---