使用本地 VS Code 编辑器开发代码

了解如何从本地计算机到工作站打开 SSH 隧道，然后使用 VS Code 远程开发支持从本地 VS Code 编辑器连接到 Cloud Workstations。

准备工作

在开始之前，请确保您已按照以下步骤完成以下任务：

  1. 确保您的团队中有人创建了工作站配置。
  2. 创建并启动工作站。

  3. 在 Google Cloud 控制台中，复制以下信息：

    1. 项目名称和 ID：点击 Google Cloud 菜单栏中的项目名称，然后复制随即打开的 Project name and ID（项目名称和 ID）对话框中的 ID。
    2. 区域
    3. 集群名称
    4. 配置名称

  4. 在本地机器上，安装 gcloud CLI。

    如果您是首次运行 gcloud CLI，可能还需要运行 gcloud auth login 以获取凭据，并运行 gcloud config set project PROJECT_ID 以将当前项目设置为您在上一步中复制的项目 ID。

  5. 首次使用 ssh 时，请安装远程 SSH 扩展程序，以便您可以通过扩展程序市场或通过命令 Palette 从 VS Code 编辑器连接到工作站。

    Extensions Marketplace

    1. 打开本地 VS Code 编辑器应用，然后在活动栏中依次选择
      Extensions（扩展程序）以打开 Extensions Marketplace（扩展程序市场）。

    2. 点击 Install 以安装 Remote - SSH 扩展程序。

    3. 在搜索字段中输入 remote ssh，系统随即会打开远程 - SSH 的扩展程序页面。

      安装 Remote-SSH 扩展程序

    命令面板

    1. 如需打开命令面板，请按 Ctrl+Shift+P（在 macOS 上，按 Command+Shift+P），或点击视图 > 命令面板。

    2. 输入 ext install ms-vscode-remote.remote-ssh 以安装该扩展程序。

打开 SSH 隧道

使用 gcloud workstations start-tcp-tunnel 命令打开从本地计算机到工作站的 SSH 隧道：

  1. 在 Google Cloud 控制台中，前往 Cloud Workstations > 工作站页面。

    进入“工作站”

  2. 点击工作站名称以打开工作站详情页面。

  3. 在以下示例中，替换工作站名称、区域（位置）、工作站集群名称和工作站配置名称的占位符。将“工作站详细信息”面板中的值复制到带有修改图标的占位符中。

    gcloud workstations start-tcp-tunnel \
  --project=PROJECT_ID \
  --region=REGION \
  --cluster=CLUSTER_NAME \
  --config=CONFIG_NAME \
  --local-host-port=:LOCAL_PORT \
  WORKSTATION_NAME 22

    请参阅准备工作部分，查找项目 ID。

    --local-host-port=:LOCAL_PORT 标志是可选的。如果您想指定本地端口，请将 LOCAL_PORT 替换为您要使用的本地端口号。如果您未指定本地端口，系统会为您选择一个任意未使用的本地端口，并输出包含端口号的消息，以便您知道它使用的是哪个本地端口。

  4. 填充占位符后，点击 content_copy Copy code sample 复制 gcloud CLI 命令。

  5. 将该命令粘贴到本地终端窗口中，然后按 Enter 键以创建隧道。

    命令成功后，系统会显示 Listening on port 消息，后跟本地端口号。

如需详细了解每个配置标志，请参阅 SSH 隧道或 start-tcp-tunnel。

连接到 Cloud Workstations 主机

请按照以下步骤连接到 Cloud Workstations 主机：

  1. 打开或返回 VS Code 应用。

  2. 如需启动远程 - SSH，请点击状态栏中的 打开远程窗口。

  3. 当 Command Palette 打开时，选择 Connect to Host 选项。

    连接到主机

  4. 输入 user@localhost:LOCAL_PORT，将 LOCAL_PORT 替换为您的本地端口号。

    以下示例通过指定 user@localhost:1025 连接到本地端口 1025。

    添加 SSH 主机

  5. 如果您在看到主机已添加确认消息后收到连接提示，请点击连接。

    系统可能还会提示您确认哈希。如果出现提示，请点击继续。

  6. 系统会打开一个新的 VS Code 编辑器，并且 VS Code 状态栏会显示 SSH: localhost: 后跟端口号。

    现在，您可以访问远程工作站上的文件和语言服务器，还可以构建和运行在工作站内运行的进程。

    以下示例展示了一个通过 SSH: localhost: 1025 连接到 Cloud Workstations 的 VS Code 编辑器窗口。

    已连接到工作站

    您还可以返回 Extensions Marketplace 安装 Cloud Code 和其他本地 VS Code 扩展程序，以帮助您构建、运行和测试代码。