了解 AWS Cloud9 IDE

本主题提供了对 AWS Cloud9 集成开发环境 (IDE) 的基本导览。为了充分利用此导览，请按照以下顺序逐步操作。

先决条件

要继续本导览，您必须有一个 AWS 账户和一个开放的 AWS Cloud9 开发环境。要了解如何执行这些操作，您可以执行 入门：AWS Cloud9 的基本教程 中的步骤。您也可以探索单独的相关主题，例如 设置 AWS Cloud9 和 在环境中工作 AWS Cloud9。

警告

拥有 AWS Cloud9 开发环境可能会导致向您的 AWS 账户收费。如果您使用 EC2 环境，其中包括可能对 Amazon EC2 收取的费用。有关更多信息，请参阅 Amazon EC2 定价。

步骤 1：菜单栏

IDE 顶部边缘的菜单栏 中包含用于处理文件和编码以及用于更改 IDE 设置的常用命令。还可以通过菜单栏预览和运行代码。

通过选择菜单栏边缘的箭头可以隐藏它，如下所示。

通过选择菜单栏之前位置中间的箭头，可以重新显示菜单栏，如下所示。

将结果与以下内容进行比较。

在本教程接下来的几节中，您可以使用 IDE 处理一组文件。要设置这些文件，请依次选择 File (文件)、New File (新建文件)。

接下来，将以下文本复制到 Untitled1 编辑器选项卡中。

fish.txt
--------
A fish is any member of a group of organisms that consist of
all gill-bearing aquatic craniate animals that lack limbs with
digits. They form a sister group to the tunicates, together
forming the olfactores. Included in this definition are
lampreys and cartilaginous and bony fish as well as various
extinct related groups.

要保存文件，请依次选择 File (文件)、Save (保存)。将该文件命名为 fish.txt，然后选择 Save (保存)。

按以上说明重复操作，使用以下内容将第二个文件保存为 cat.txt。

cat.txt
-------
The domestic cat is a small, typically furry, carnivorous mammal.
They are often called house cats when kept as indoor pets or
simply cats when there is no need to distinguish them from
other felids and felines. Cats are often valued by humans for
companionship and for their ability to hunt.

在 IDE 中，通常可以通过多种方法执行操作。例如，如果要隐藏菜单栏，除了选择其边缘的箭头外，还可以选择 View (视图)、Menu Bar (菜单栏)。如果要创建新文件，除了选择 File (文件) > New File (新建文件) 外，还可以按 Alt-N（在 Windows/Linux 中）或 Control-N（在 MacOS 中）。为减少本教程的长度，我们只介绍一种操作方法。随着您逐渐熟悉 IDE，您可以随意探索并找出最适合您的方法。

第 2 步：控制面板

控制面板 让您可以快速访问您的各个环境。在控制面板中，您可以创建、打开和更改环境的设置。

要打开控制面板，在菜单栏上选择 AWS Cloud9 > Go To Your Dashboard (转到您的控制面板)。

要查看环境的设置，在 my-demo-environment 卡中选择标题。要返回控制面板，请使用 Web 浏览器的后退按钮或名为 Environments（环境）的面包屑导航。

要为您的环境打开 IDE，请选择 Open IDE（打开 IDE）中的 my-demo-environment 卡。

注意

需要一些时间，才能再次显示 IDE。

步骤 3：“Environment（环境）”窗口

Environment（环境）窗口中显示环境中的文件夹和文件的列表。还可以显示不同类型的文件，如隐藏文件。

要显示或隐藏 Environment（环境）窗口的内容，请选择 Environment（环境）按钮。

要显示或隐藏 Environment（环境）窗口和 Environment（环境）按钮，请在菜单栏上依次选择 Window（窗口）、Environment（环境）。

要显示或隐藏隐藏的文件，请在 Environment（环境）窗口中，选择齿轮图标，然后选择 Show Hidden Files（显示隐藏的文件）。

步骤 4：编辑器、选项卡和窗格

在编辑器 中可以执行编写代码、运行终端会话和更改 IDE 设置等操作。打开文件的每个实例、终端会话等均由选项卡 表示。选项卡可以分组到窗格 中。选项卡显示在其窗格边缘。

要显示或隐藏选项卡，请在菜单栏上选择 View (视图) > Tab Buttons (选项卡按钮)。

要打开新的选项卡，请选择选项卡所在行边缘的 + 图标。然后选择一个可用的命令，例如 New File (新建文件)，如下所示。

要显示两个窗格，请选择位于选项卡所在行边缘、看上去像下拉菜单的图标。然后选择 Split Pane in Two Rows (将窗格拆分为两排)，如下所示。

要返回到单个窗格中，请重新选择下拉菜单图标，然后选择单个方形图标，如下所示。

第 5 步：控制台

控制台 是可创建和管理选项卡的另一个位置。默认情况下，它包含一个“Terminal (终端)”选项卡，但也可以包含其他类型的选项卡。

要显示或隐藏控制台，请在菜单栏上选择 View (视图) > Console (控制台)。

要展开或收缩控制台，请选择控制台边缘的调整大小图标，如下所示。

步骤 6：打开文件部分

Open Files (打开文件) 部分显示当前在编辑器中打开的所有文件的列表。Open Files（打开文件）是 Environment（环境）窗口的一部分。

要显示或隐藏 Open Files (打开文件) 部分，请在菜单栏上选择 View (视图) > Open Files (打开文件)。

要在打开文件部分之间切换，请从列表中选择感兴趣的文件。

第 7 步：间距

间距位于编辑器中各个文件的边缘，当您处理文件时，其中显示行号和上下文符号等内容。

要显示或隐藏间距，请在菜单栏上选择 View (视图) > Gutter (间距)。

步骤 8：状态栏

状态栏位于编辑器中各个文件的边缘，其中显示行号、字号、文件类型首选项、空格和选项卡设置以及相关的编辑器设置等内容。

要显示或隐藏状态栏，请在菜单栏上选择 View (视图) > Status Bar (状态栏)。

要转到特定行号，请选择包含感兴趣文件的选项卡。然后在状态栏中选择行号和字号（应类似于 7:45）。键入行号 (如 4)，然后按 Enter，如下所示。

要更改文件类型首选项，请在状态栏中选择不同的文件类型。例如，为 cat.txt 选择 Ruby 可查看语法色彩的更改。要恢复纯文本颜色，请选择 Plain Text (纯文本)，如下所示。

步骤 9：“Outline（大纲）”窗口

您可以使用 Outline (大纲) 窗口快速转到特定的文件位置。

要显示或隐藏 Outline（大纲）窗口和 Outline（大纲）按钮，请在菜单栏上依次选择 Window（窗口）、Outline（大纲）。

要了解 Outline (大纲) 窗口的工作方式，请创建一个名为 hello.rb 的文件。将以下代码复制到文件中并保存它。

def say_hello(i)
  puts "Hello!"
  puts "i is #{i}"
end

def say_goodbye(i)
  puts "i is now #{i}"
  puts "Goodbye!"
end

i = 1
say_hello(i)
i += 1
say_goodbye(i)

要显示或隐藏 Outline (大纲) 窗口的内容，请选择 Outline (大纲) 按钮。

在 Outline (大纲) 窗口中，选择 say_hello(i)，然后选择 say_goodbye(i)。

步骤 10：“Go（转到）”窗口

您可以使用 Go (转到) 窗口以在编辑器中打开文件，转到符号的定义，运行命令，或转到编辑器中活动文件的某一行。

要显示 Go (转到) 窗口的内容，请选择 Go (转到) 按钮（放大镜图标）。

要显示或隐藏 Go（转到）窗口和 Go（转到）按钮，请在菜单栏上选择 Window（窗口）、Go（转到）。

在 Go (转到) 窗口打开的情况下，您可以：

• 键入一个正斜杠 (/)，后跟部分或全部文件名。在显示的匹配文件列表中，选择要在编辑器中打开的文件。例如，键入 /fish 会列出 fish.txt，而键入 /.txt 会列出 fish.txt 和 cat.txt。

  注意

  文件搜索范围仅限 Environment (环境) 窗口中的非隐藏文件和非隐藏文件夹。

• 键入一个 @ 符号 (@)，后跟符号名称。在显示的匹配符号列表中，选择要在编辑器中转到的符号。例如，在编辑器中打开 hello.rb 文件并处于活动状态时，键入 @hello 可列出 say_hello(i)，或键入 @say 可列出 say_hello(i) 和 say_goodbye(i)。

  注意

  如果编辑器中的活动文件是支持的语言项目的一部分，则符号搜索范围限于当前项目。否则，符号搜索范围仅限编辑器中的活动文件。有关更多信息，请参阅增强 TypeScript 支持和特征。

• 键入一个点号 (.)，后跟命令名称。在显示的命令列表中，选择一条命令以运行该命令。例如，键入 .closetab 然后按 Enter 键关闭编辑器中的当前选项卡。有关可用命令的列表，请参阅用于 AWS Cloud9 集成开发环境 (IDE) 的命令参考。

• 键入一个冒号 (:)，后跟一个数字，以转到编辑器中活动文件的该行号。例如，在编辑器中打开 hello.rb 文件并处于活动状态时，键入 :11 以转到该文件的第 11 行。

要根据当前键盘模式和操作系统查看每个操作的键盘绑定，请参阅菜单栏中 Go（转到）菜单上的每个可用 Go To（转到）命令。

步骤 11：“Immediate（立即运行）”选项卡

使用 Immediate (立即运行) 选项卡可以测试小段的 JavaScript 代码。要了解 Immediate (立即运行) 选项卡的工作方式，请执行以下操作。

1. 在菜单栏上选择 Window (窗口)、New Immediate Window (新建即时窗口)，打开 Immediate (立即运行) 选项卡。

2. 在 Immediate (立即运行) 选项卡中运行某些代码。要尝试该操作，请在窗口中键入以下代码，并在键入第一行和第二行以后分别按 Shift-Enter。在键入第三行以后按 Enter。（如果您在键入第一行或第二行以后按 Enter 而不是 Shift-Enter，代码将早于您的预期时间运行。）

   for (i = 0; i <= 10; i++) { // Press Shift-Enter after typing this line.
     console.log(i)            // Press Shift-Enter after typing this line.
   }                           // Press Enter after typing this line. The numbers 0 to 10 will be printed.

   

步骤 12：进程列表

Process List (进程列表) 中显示所有正在运行的进程。您可以停止、甚至强制停止您不想继续运行的进程。要了解 Process List (进程列表) 窗口的工作方式，请执行以下操作。

1. 在菜单栏上选择 Tools (工具)、Process List (进程列表)，以显示 Process List (进程列表)。

2. 查找进程。在 Process List (进程列表) 中，键入进程的名称。

3. 停止或强制停止进程。在进程列表中选择进程，然后选择 Kill (终止) 或 Force Kill (强制终止)。

第 13 步：首选项

首选项 中包含以下设置。

• 仅适用于当前环境的设置，例如是否在编辑器中使用软制表符、要忽略的文件类型以及 PHP 和 Python 等语言的代码完成行为。

• 适用于每个环境的用户设置，如颜色、字体和编辑器行为。

• 您的键绑定，例如，您首选用于处理文件和编辑器的快捷键组合。

• IDE 的整体主题。

要显示首选项，请在菜单栏上选择 AWS Cloud9 > Preferences (首选项)。此时会显示类似于下面的内容：

第 14 步：终端

您可以在 IDE 中运行一个或多个终端 会话。要开始一个终端会话，请在菜单栏上依次选择 Window (窗口)、New Terminal (新建终端)。或者，选择“Console (控制台)”选项卡旁边的“加号”图标，然后选择 New Terminal (新建终端)。

您可以尝试在终端中运行命令。例如，在终端中键入 echo $PATH，然后按 Enter 以显示 PATH 环境变量的值。

您也可以尝试运行其他命令。例如，尝试使用以下命令。

• pwd 可输出当前目录的路径。

• aws --version 可输出有关 AWS CLI 的版本信息。

• ls -l 可输出有关当前目录的信息。

步骤 15：“Debugger（调试程序）”窗口

您可以使用 Debugger (调试程序) 窗口调试代码。例如，您可以单步运行代码（即一次运行一部分）、观察一段时间内的变量值以及研究调用堆栈。

注意

此过程类似于任一基本 IDE 教程中的 步骤 2：IDE 基本导览。

要显示或隐藏 Debugger（调试程序）窗口和 Debugger（调试程序）按钮，请在菜单栏上依次选择 Window（窗口）、Debugger（调试程序）。

在本教程中，您可以通过执行以下操作来试用 Debugger (调试程序) 窗口和一些 JavaScript 代码。

1. 在终端会话中运行以下命令：node --version，来检查环境中 Node.js 的安装情况。如果已安装 Node.js，则输出中会显示 Node.js 版本号，您可以跳至本过程的第 3 步（“编写一段 JavaScript 代码...”）。

2. 如果您需要安装 Node.js，请执行以下操作。

   1. 运行以下两条命令，一次一条，以确保环境拥有最新的更新，然后下载 Node Version Manager (nvm)。（nvm 是一个简单的 Bash shell 脚本，对安装和管理 Node.js 版本非常有用。有关更多信息，请参阅 GitHub 上的 Node Version Manager。）

      对于 Amazon Linux：

      sudo yum -y update
      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

      对于 Ubuntu Server：

      sudo apt update
      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

   2. 使用文本编辑器更新您的 Shell 配置文件（例如，~/.bashrc）以允许加载 nvm。例如，在 IDE 的 Environment（环境）窗口中选择齿轮图标，然后选择 Show Home in Favorites（在收藏夹中显示主页）。重复该步骤，然后选择 Show Hidden Files（显示隐藏的文件）。

   3. 打开 ~/.bashrc 文件。

   4. 在文件末尾键入或粘贴以下代码，以启用 nvm 加载。

      对于 Amazon Linux：

      export NVM_DIR="/home/ec2-user/.nvm"
      [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.

      对于 Ubuntu Server：

      export NVM_DIR="/home/ubuntu/.nvm"
      [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.

   5. 保存该文件。

   6. 关闭该终端会话，并启动一个新会话。然后，运行以下命令来安装最新版本的 Node.js。

      nvm install node

3. 编写一段 JavaScript 代码进行调试。例如，创建一个文件，将以下代码添加到该文件中，并将其保存为 hello.js。

   var i;
   
   i = 10;
   
   console.log("Hello!");
   console.log("i is " + i);
   
   i += 1;
   
   console.log("i is now " + i);
   console.log("Goodbye!");

4. 将一些断点添加到代码中。例如，在间距中选择第 6 行和第 10 行的页边距。以上两行的行号旁会显示一个红色圆圈，如下所示。

   

5. 现在，已经做好调试 JavaScript 代码的准备了。为此，请执行以下操作。

   1. 要显示或隐藏 Debugger (调试程序) 窗口的内容，请选择 Debugger (调试程序) 按钮，如下一步中所示。

   2. 观察名为 i 的变量在代码运行过程中的值。在 Debugger (调试程序) 窗口中，为 Watch Expressions (监视表达式) 选择 Type an expression here (在此处键入表达式)。键入字母 i，然后按 Enter，如下所示。

      

   3. 开始运行代码。依次选择 Run (运行)、Run With (运行方式)、Node.js，如下所示。

      

   4. 代码在第 6 行暂停运行。Debugger（调试程序）窗口显示 Watch Expressions（监视表达式）中 i 的值，当前值是 10。

      

   5. 在 Debugger (调试程序) 窗口中，选择 Resume (恢复)，即如下所示的蓝色箭头图标。

      

   6. 代码在第 10 行暂停运行。Debugger (调试程序) 窗口现在显示 i 的新值，当前值是 11。

   7. 再次选择 Resume (恢复)。代码会运行到结束。输出会转到控制台的 hello.js 选项卡，如下所示。

      

将结果与以下内容进行比较。

最终思考

警告

请记住，拥有 AWS Cloud9 开发环境可能导致向您的 AWS 账户收取费用。如果您使用 EC2 环境，其中包括可能对 Amazon EC2 收取的费用。有关更多信息，请参阅 Amazon EC2 定价。

上一级章节（使用 IDE）中还有其他主题，可供您用于进一步探索。但是，当您完成 AWS Cloud9 IDE 导览，并且不再需要环境时，请务必将其及相关资源删除，如 删除环境 中所述。