
# VScode 接入云开发环境
**操作场景**
本文档将为开发者提供 VS Code 安装 Huawei Developer Space 插件远程连接华为开发者空间 - 云开发环境（虚拟机）的操作指导。
VS Code 接入华为开发者空间云开发环境（虚机版），开发者可以熟悉的操作方式，无缝调用云端标准化环境、充足算力及华为根技术支持，兼顾开发效率、团队协作一致性与代码安全。
**前提条件**
- 安装 VS Code。**注意：如果没有安装 VS Code，请点此链接[下载](https://code.visualstudio.com/download)安装。**
- 已有华为云账号，并完成实名认证。
**操作步骤**
1. **创建云开发环境**
   
   打开 VS Code，点击下图图标，搜索**Huawei Developer Space**，点击 Install，安装华为开发者空间插件，如图 1 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533396121.png "点击放大")
   图1
   
   安装完成后，点击下图插件图标，点击 Sign in Huawei Developer Space，登录华为开发者空间，如图 2 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533396219.png "点击放大")
   图2
   
   提示是否打开网站，选择 Open，如图 3 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501596402.png "点击放大")
   图3
   
   此时如果已登录华为云将会提示进行授权，如图 4 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533516369.png)
   图4
   
   如未登录，将跳转华为云登录界面。
   登录成功后，回到 VS Code，显示登录成功界面，如图 5 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501597232.png "点击放大")
   图5
   
   点击 **CLOUD DEVELOPMENT ENVIRONMENT (VIRTUAL MACHINE)** 云开发环境（虚拟机）目录下的**Create Cloud Development Environment**，用于创建云开发环境，如图 6 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501597376.png "点击放大")
   图6
   
   此时会要求开发者输入云开发环境名称，如图 7 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501597470.png "点击放大")
   图7
   
   按下 Enter 键，云开发环境的状态由创建中变为已就绪（持续时间 2 分钟左右），如图 8 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501597550.png "点击放大")
   图8
   
   此时，可以看到云开发环境已经创建完成，云主机状态为已就绪。
   
   
2. **启动云开发环境**
   
   点击创建好的虚拟机右侧 Start 图标进行开机，如图 9 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533517657.png "点击放大")
   图9
   
   此时，显示云主机状态由已就绪变为运行中，如图 10 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501757860.png "点击放大")
   图10
   
   我们在鼠标悬浮在此处可看到云开发环境的详细信息，如图 11 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002515004990.png)
   图11
   
   此时，云开发环境已成功开机，状态为已就绪。
   
   
3. **连接云开发环境**
   
   点击创建好的虚拟机右侧 Connect 图标，连接远程开发环境，如图 12 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533518515.png "点击放大")
   图12
   
   由于云开发环境的操作系统是 Euler，内核是 Linux，所以接下来选择 Linux 作为远程主机的平台进行连接，如图 13 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533398533.png "点击放大")
   图13
   
   选择Continue继续进行下一步，如图 14 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533518825.png "点击放大")
   图14
   
   此时云开发环境会自动下载 VS Code Server，下载完成之后将弹出弹窗，我们勾选**【Trust the authors of all files in the parent folder】** ，然后点击【**Yes，I trust the authors】**即可。
   按下 Ctrl+Shift+\`，打开 terminal 窗口，输入：lscpu \| head，可查看虚拟机的硬件配置信息，如图 15 所示。
   ```
   lscpu | head
   ```
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501758962.png "点击放大")
   图15
   
   关键参数如表1所示。
   表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，转发一个端口，如图 16 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501603286.png "点击放大")
   图16
   
   输入端口 8080 进行转发，如图 17 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501603554.png "点击放大")
   图17
   
   切换至 terminal 窗口，输入以下命令行，将启动本地服务器，监听8080端口，如图 18 所示。
   ```
   python -m http.server 8080
   ```
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501763500.png "点击放大")
   图18
   
   此时，我们在云端虚机的 8080 端口启动了一个 Web 应用，通过端口转发将云端 8080 映射到本地 8080 后，直接在本地浏览器输入 localhost:8080，就能访问云端运行的这个 Web 应用，无需额外配置云端公网访问、防火墙等，这将大幅简化云端服务的本地调试流程。
   点击 Open in Browser，打开浏览器可看到已经访问了云开发环境的目录列表，如图 19 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002501603864.png "点击放大")
   图19
   
   可以看到，我们已经成功将云开发环境 8080 端口转发至本地。
   
   
5. 通过 vscode 进行云开发环境延时、关机等操作 
   我们还可以在 vscode 中对云开发环境进行一些管理操作。
   如需延时，可点击此延时按钮，需剩余时长少于 1 小时时使用，如图 20 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533525155.png "点击放大")
   图20
   
   如需关机，可点击此关机按钮，如图 21 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533405271.png "点击放大")
   图21
   
   云开发环境的状态由关机中变为已就绪(持续时间 2 分钟左右)，在已就绪的状态下可以进行删除操作，如图 22 所示。
   ![](https://support.huaweicloud.com/devg-hdspace/zh-cn_image_0000002533405407.png "点击放大")
   图22
   
   此时，我们已经完成了对 IDE 插件（vscode版）方式接入云开发环境的全部流程。
   
   
 
