在 VS Code 中编写 Yarn

安装 Yarn Spinner Visual Studio Code 扩展后，您可以在 VS Code 编辑器中创建新的 Yarn 文件并编辑现有文件。

制作或打开 Yarn 文件

您可以使用“文件”菜单 →“新建文件”命令来创建一个新的空文件。只需使用以下命令保存文件 .yarn 扩展以激活纺纱机扩展功能。

[！信息] Yarn Spinner for Visual Studio Code 设计用于处理文件夹，而不是单个文件。如果遇到问题，请打开包含您的文件夹的文件夹 .yarn 文件或其中的文件。

您还可以打开任何现有的 .yarn 文件或文件夹 .yarn 文件，使用 VS Code。

在 Visual Studio Code 中编写 Yarn

在这里，我们将演练使用 Yarn Spinner for Visual Studio Code 编写的过程 .yarn 故事。

打开文件夹

对于这个例子，我们将从一个现有的故事开始（Chat.yarn）在文件夹（YSDocsDemos):

磁盘上包含 Yarn 文件的文件夹。

[！信息] 您可以将此文件夹下载为 .zip 如果您想继续，请在此处提交文件。待办事项链接。

如果我们打开 VS Code，默认屏幕中间会有一个“打开”按钮。

Visual Studio Code 开始屏幕上的“打开”按钮。

单击此按钮，或选择“文件”菜单 →“打开文件夹…”，然后打开包含您的文件的文件夹 .yarn 文件：

打开包含 .yarn 文件的文件夹。

当文件夹打开时，您将看到 VS Code 的侧边栏发生变化以反映文件夹的内容。您可以点击 .yarn 文件以在文本编辑器中打开它：

选择要编辑的 .yarn 文件。

在 Visual Studio Code 中使用 Yarn

与一个 .yarn 在 VS Code 中打开文件后，您可以通过查看屏幕右下角并找到“Yarn Spinner”字样来验证 Yarn Spinner for Visual Studio Code Extension 是否处于活动状态：

VS Code 的状态栏显示 Yarn Spinner 扩展处于活动状态。

[！信息] 仅当安装了适用于 Visual Studio Code 的 Yarn Spinner 扩展且当前活动文件被识别为 .yarn 文件的扩展名。

您可以使用文本编辑视图来处理 .yarn，并写下你的叙述。 Visual Studio Code 扩展的 Yarn Spinner 提供了各种功能来简化此过程。

例如，如果您按住 Command 键（在 macOS 上）或 Control 键（在 Windows 或 Linux 上）并将鼠标悬停在节点名称上，例如 `<<jump>> 语句，您将能够单击它们将编辑器视图移动到代表该节点的 Yarn：

命令/控制允许您单击节点名称以跳转到其定义。

您还将获得基于项目中存在的节点名称的自动完成建议。例如，如果您创建一个新的 <<jump>> 声明，您将能够从节点中进行选择：

选择要通过自动完成功能跳转到的节点。

如果您的 Yarn 项目也使用变量，Yarn Spinner for VS Code 也会有所帮助。例如，当您 <<declare>> 一个新变量，您可以添加三个注释 / 在它前面提供变量的描述：

使用特殊的 /// 注释语法来描述变量。

然后，当您使用该变量时，您可以在 VS Code 中将鼠标悬停在该变量上，以提醒其用途（及其默认值）：

查看变量的描述。

当您尝试使用变量名称时，它们也会自动完成，如果存在类型问题，则会显示错误。所以，如果你 <<declare>> 变量是某种类型，例如 boolean:

使用 `<> 声明布尔值。

…然后尝试以会产生错误的方式使用该变量。例如，通过尝试为其分配一个数字，Yarn Spinner for Visual Studio Code 将显示错误：

尝试使用像 integer 这样的 boolean 时出现错误。

您还可以查看游戏 C# 源代码中定义的命令的文档注释：

Yarn 脚本中 C# 命令的注释。

使用节点

虽然 Yarn 是一种基于文本的语言，但我们的 Yarn Spinner for Visual Studio Code 扩展提供了方便的图形视图。您可以打开任意一个的图形视图 .yarn 单击右上角的“图表视图”按钮，查看您当前正在使用的文件：

图表视图按钮。

您可能会注意到，当您第一次查看图形视图时 .yarn 文件中，所有节点都相互堆叠在一起，如下所示：

节点在图表视图中相互堆叠。

为了理解事物并更好地理解事物 <<jump>> 在节点之间使用，您可以通过单击并将节点拖动到您想要的任何位置来重新排列节点：

重新排列节点。

节点的位置将存储在每个节点的标头中：

每个节点的位置存储在标头中。

您可以使用图形视图顶部的“添加节点”按钮来添加新节点。新节点将出现在图形视图和文本编辑器中：

添加节点按钮。

双击图形视图中的节点将跳转到文本视图中的该节点：

双击图形视图中的节点可在文本视图中对其进行编辑。

如果您有很多节点，您可以使用图形视图右上角的跳转到节点菜单，将图形视图跳转到特定节点：

跳转到节点菜单。

您也可以随时单击文本视图中每个节点上方的“在图形视图中显示”，将图形视图跳转到该节点：

在图表视图中显示

自定义图表视图

您可以向每个节点的标题添加一些额外的元数据来自定义图形视图，以便于理解脚本区域之间的关系。例如，如果您添加 color 字段添加到标题中，您可以对节点进行颜色编码：

颜色编码的节点。

[！信息] 你可以使用 red, green, blue, orange, yellow， 或者 purple。您看到的颜色可能会有所不同，具体取决于您的 VS Code 主题。

这 color 字段的工作方式与任何其他标头元素类似，并且位于 title 以及上面的 ---:

title: NodeName
color: purple
---

===

您还可以通过添加以下内容对节点进行分组 group 字段到您的节点标头。例如，如果您添加 group: Main_Options 到的标题 Volcanos, Dogs， 和 Trees 节点，你最终会得到这样的结果：

在图表视图中对节点进行分组。

使用命令面板

VS Code 命令面板还具有许多有用的 Yarn Spinner 功能。通过按 Shift + Command + P (Mac) 或 Ctrl + Shift + P (Windows/Linux) 或选择“视图”菜单 → 命令面板…来调用命令面板，然后键入“Yarn Spinner”以筛选由 Yarn Spinner for Visual Studio Code Extension 提供的可用命令：

命令面板

从这里您可以预览对话，这将允许您在 Visual Studio Code 中播放您的叙述。要了解更多相关信息，请阅读 previewing-your-dialogue.md.

“将对话导出为 HTML…”选项会将叙述的独立可玩版本导出为 HTML 文件，这与预览时获得的体验相同。

将对话导出为图表…选项将允许您导出 .dot 你的图表文件。要了解 .dot 文件，查看 GraphViz 文档： https://graphviz.org/doc/info/lang.html

最后，“将对话导出为录制电子表格…”选项将允许您导出电子表格，这对于配音演员录制对话非常有用。