VScode 接入云开发环境

操作场景

本文档将为开发者提供 VS Code 安装 Huawei Developer Space 插件远程连接华为开发者空间 - 云开发环境（虚拟机）的操作指导。

VS Code 接入华为开发者空间云开发环境（虚机版），开发者可以熟悉的操作方式，无缝调用云端标准化环境、充足算力及华为根技术支持，兼顾开发效率、团队协作一致性与代码安全。

前提条件

• 安装 VS Code。注意：如果没有安装 VS Code，请开发者自行下载安装。
• 已有华为账号，并完成实名认证。

操作步骤

1. 创建云开发环境

   打开 VS Code，点击下图图标，搜索 Huawei Developer Space，点击 Install，安装华为开发者空间插件，如图31所示。

   

   图31

   安装完成后，点击下图插件图标，点击 Sign in Huawei Developer Space，登录华为开发者空间，如图32所示。

   

   图32

   提示是否打开网站，选择 Open，如图33所示。

   

   图33

   此时如果已登录华为云将会提示进行授权，如图34所示。

   

   图34

   如未登录，将跳转华为云登录界面。

   登录成功后，回到 VS Code，显示登录成功界面，如图35所示。

   

   图35

   点击 CLOUD DEVELOPMENT ENVIRONMENT (VIRTUAL MACHINE) 云开发环境（虚拟机）目录下的 Create Cloud Development Environment，用于创建云开发环境，如图36所示。

   

   图36

   此时会要求开发者输入云开发环境名称，如图37所示。

   

   图37

   按下 Enter 键，云开发环境的状态由创建中变为已就绪(持续时间2分钟左右)，如图38所示。

   

   图38

   此时，可以看到云开发环境已经创建完成，云主机状态为已就绪。

2. 启动云开发环境

   点击创建好的虚拟机右侧 Start 图标进行开机，如图39所示。

   

   图39

   此时，显示云主机状态由已就绪变为运行中，如图40所示。

   

   图40

   我们在鼠标悬浮在此处可看到云开发环境的详细信息，如图41所示。

   

   图41

   此时，云开发环境已成功开机，状态为已就绪。

3. 连接云开发环境

   点击创建好的虚拟机右侧 Connect 图标，连接远程开发环境，如图42所示。

   

   图42

   由于云开发环境的操作系统是 Euler，内核是 Linux，所以接下来选择 Linux 作为远程主机的平台进行连接，如图43所示。

   

   图43

   选择Continue继续进行下一步，如图44所示。

   

   图44

   此时云开发环境会自动下载 VS Code Server，下载完成之后将弹出弹窗，我们勾选【Trust the authors of all files in the parent folder】，然后点击【Yes，I trust the authors】即可。

   按下 Ctrl+Shift+`，打开 terminal 窗口，输入：lscpu | head，可查看虚拟机的硬件配置信息，如图45所示。

   lscpu | head

   

   图45

   关键参数如下：

   表1

   名称	参数
   Architecture【架构】	aarch64
   CPU op-mode(s)【CPU 操作模式】	64-bit
   CPU(S)【CPU核数】	2
   Vebdor ID【供应商ID】	HiSilicon
   Model name 【型号名称】	Kunpeng-920
   Thread(s) per core【每个核心的线程数】	1

   此时，我们成功连接到云开发环境。

4. 云开发环境端口转发

   端口转发是把华为开发者空间云开发环境（虚机版）云端虚机上某个端口的网络请求，映射到你本地电脑的指定端口，让你能像访问本地服务一样，直接在本地浏览器 / 客户端访问运行在云端的应用或服务。

   点击控制台的 PORTS->Forward a Port，转发一个端口，如图46所示。

   

   图46

   输入端口 8080 进行转发，如图47所示。

   

   图47

   切换至 terminal 窗口，输入以下命令行，将启动本地服务器，监听8080端口，如图48所示。

   python -m http.server 8080 

   

   图48

   此时，我们在云端虚机的 8080 端口启动了一个 Web 应用，通过端口转发将云端 8080 映射到本地 8080 后，直接在本地浏览器输入 localhost:8080，就能访问云端运行的这个 Web 应用，无需额外配置云端公网访问、防火墙等，这将大幅简化云端服务的本地调试流程。

   点击 Open in Browser，打开浏览器可看到已经访问了云开发环境的目录列表，如图49所示。

   图49

   可以看到，我们已经成功将云开发环境 8080 端口转发至本地。

5. 通过 vscode 进行云开发环境延时、关机等操作

   我们还可以在 vscode 中对云开发环境进行一些管理操作。

   如需延时，可点击此延时按钮，需剩余时长少于 1 小时时使用，如图50所示。

   图50

   如需关机，可点击此关机按钮，如图51所示。

   图51

   云开发环境的状态由关机中变为已就绪(持续时间 2 分钟左右)，在已就绪的状态下可以进行删除操作，如图52所示。

   

   图52

   此时，我们已经完成了对 IDE 插件（vscode版）方式接入云开发环境的全部流程。