2023年最流行的WebIDE平台

事机一失应难再，时乎时乎不我待。
—— 清·秋瑾《赠蒋鹿珊先生言志且为他日成功之鸿爪也》

Web IDE

一种针对编程开发人员的在线集成开发环境，编程人员无需本地安装开发环境，只需打开浏览器就能立即开发，同时支持断点调试、版本管理、团队开发等。
—— 《百度百科》

在线IDE，也被称为Cloud IDE，主要基于HTML5相关技术构建，通常在浏览器里即可完成传统IDE的大部分开发工作。在线IDE的重要组成部分为：基于Javascript的源代码编辑器。
—— 《维基百科》

WebIDE的目的：

• 个人： 上手迅速、开发便捷、不用关注配置及插件、切换项目更方便
• 团队： 能够统一化配置、代码移交更方便
• 企业： 安全的云端管理、可控的代码拷贝隐患、可实现研发平台整合、监测开发人员在线时长

一、SmartIDE（开源）

官方网站： https://smartide.cn/zh/
Gitee仓库开源代码： https://gitee.com/SmartIDE/SmartIDE

1. 环境安装

⑴. docker

• Windows： 安装 Docker 桌面版
• MacOS：
  • 安装 Docker 桌面版（Inter芯片版）
  • 安装 Docker 桌面版（M1芯片版）
• Linux： 服务器上安装 Docker

  # 注意不要使用sudo方式运行此脚本
  curl -o- https://smartidedl.blob.core.chinacloudapi.cn/docker/linux/docker-install.sh | bash
  # 退出
  exit
  

⑵. SmartIDE 稳定版

• Windows：

  # 打开终端窗口，执行以下脚本即可下载，并启动安装程序
  Invoke-WebRequest -Uri ("https://smartidedl.blob.core.chinacloudapi.cn/releases/"+(Invoke-RestMethod https://smartidedl.blob.core.chinacloudapi.cn/releases/stable.txt)+"/SetupSmartIDE.msi")  -OutFile "smartide.msi"
   .\smartIDE.msi
  

• MacOS：

  # 打开终端窗口，执行以下脚本即可安装稳定版SmartIDE CLI应用
  
  # Intel芯片
  curl -OL  "https://smartidedl.blob.core.chinacloudapi.cn/releases/$(curl -L -s https://smartidedl.blob.core.chinacloudapi.cn/releases/stable.txt)/smartide-osx" \
  && mv -f smartide-osx /usr/local/bin/smartide \
  && ln -s -f /usr/local/bin/smartide /usr/local/bin/se \
  && chmod +x /usr/local/bin/smartide
  
  # Apple芯片（比如M1/M2系列）
  curl -OL  "https://smartidedl.blob.core.chinacloudapi.cn/releases/$(curl -L -s https://smartidedl.blob.core.chinacloudapi.cn/releases/stable.txt)/smartide-osx-arm64" \
  && mv -f smartide-osx-arm64 /usr/local/bin/smartide \
  && ln -s -f /usr/local/bin/smartide /usr/local/bin/se \
  

• Linux：

  # 打开终端窗口，执行以下脚本即可安装每日构建版SmartIDE CLI应用
  
  # x86 架构处理器
  curl -OL  "https://smartidedl.blob.core.chinacloudapi.cn/releases/$(curl -L -s https://smartidedl.blob.core.chinacloudapi.cn/releases/stable.txt)/smartide-linux-amd64" \
  && sudo mv -f smartide-linux-amd64 /usr/local/bin/smartide \
  && sudo ln -s -f /usr/local/bin/smartide /usr/local/bin/se \
  && sudo chmod +x /usr/local/bin/smartide
  
  # arm 架构处理器
  curl -OL  "https://smartidedl.blob.core.chinacloudapi.cn/releases/$(curl -L -s https://smartidedl.blob.core.chinacloudapi.cn/releases/stable.txt)/smartide-linux-arm64" \
  && sudo mv -f smartide-linux-arm64 /usr/local/bin/smartide \
  && sudo ln -s -f /usr/local/bin/smartide /usr/local/bin/se \
  && sudo chmod +x /usr/local/bin/smartide
  

⑶. 验证安装是否成功

# 执行命令获取当前版本
smartide version
# 输出如下 =>
v1.0.23.4650
版本号: v1.0.23.4650
操作系统: Microsoft Windows 11 企业版
构建号: 20220729.4_4650_main_Manual
编译时间: 2022-07-29 03:22:35
提交记录: a26ef7a473eb2251f9a8276755d30b73c3142e4e
发行商: leansoftX.com

2. 案例

博主这里以 Window10 本地模式演示案例

⑴. 启动SmartIDE

# 在 Windows 上打开 PowerShell 执行本段脚本
smartide start https://gitee.com/idcf-boat-house/boathouse-calculator.git 

⑵. 浏览器

会启动内置的WebIDE，可以看到一个类似vscode的IDE窗口在默认浏览器中出现

⑶. 启动项目

不再需要安装 node.js 的 sdk 环境，直接编码调试即可（已经自动 npm install 安装好了依赖）

如下图点击左侧工具栏，启动项目开始调试

⑷. 项目展示

在浏览器中打开 http://localhost:3001 即可进入交互式调试状态
（关注终端中的提示，博主的3001端口被占用，会自动开辟新的端口供调试）

3. 远程模式

SmartIDE允许用户通过SSH调度远程 Linux主机，并在远程主机上根据预置在代码库中的配置文件，完成拉取开发容器镜像，启动容器，代码映射和启动容器内的WebIDE的一系列动作。

• Windows：

  # 在 Windows 上打开 PowerShell 并执行本段脚本
  ## 添加远程主机
  smartide host add <ip地址> --username <用户名> --password <密码> --port 22
  ## 获取远程主机ID
  smartide host list 
  ## 使用远程主机ID和git库地址启动SmartIDE远程开发环境
  smartide start --host <远程主机ID> https://gitee.com/idcf-boat-house/boathouse-calculator.git
  

• MacOS：

  # 在 MacOS 上打开 终端应用(Terminal) 并执行本段脚本
  smartide host add <ip地址> --username <用户名> --password <密码> --port 22
  ## 获取远程主机ID
  smartide host list 
  ## 使用远程主机ID和git库地址启动SmartIDE远程开发环境
  smartide start --host <远程主机ID> https://gitee.com/idcf-boat-house/boathouse-calculator.git 
  

---

二、DevStudio（阿里）

阿里云网站： https://www.aliyun.com/product/yunxiao/devstudio

1. 案例演示

⑴. 云端开发平台

阿里云网址： https://ide.aliyun.com/

⑵. 创建示例项目

点击任意一个卡片，即可创建你的样例工程

⑶. 启动工程

不再需要安装 Maven 的 sdk 环境，直接编码调试即可，已经安装好了配置环境

打开DemoApplication.java文件，点击 run DemoApplication.main() 启动服务

⑷. 项目展示

打开 terminal，输入 preview get 8080，粘贴并打开浏览器访问对应接口

2. Git 仓库导入工程

⑴. 新建工作空间

⑵. 填写代码库相关信息

---

三、Theia IDE（腾讯）

轻量应用服务器（TencentCloud Lighthouse）是新一代开箱即用、面向轻量应用场景的云服务器产品，助力中小企业和开发者便捷高效的在云端构建网站、Web应用、小程序/小游戏、APP、电商应用、云盘/图床和各类开发测试环境

腾讯云地址： https://cloud.tencent.com/document/product/1207

---

四、DevEco Studio（华为）

面向全场景多设备，提供一站式的分布式应用开发平台，支持分布式多端开发、分布式多端调测、多端模拟仿真，全方位的质量与安全保障。

DevEco Studio官网： https://developer.harmonyos.com/cn/develop/deveco-studio/
开发文档： https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/deveco_overview-0000001053582387-V3?catalogVersion=V3