2023年最流行的WebIDE平台

WebIDE，在线IDE，也被称为Cloud IDE，主要基于HTML5相关技术构建，通常在浏览器里即可完成传统IDE的大部分开发工作。

后海 0_o

3784人浏览 · 2023-06-28 11:28:23

后海 0_o · 2023-06-28 11:28:23 发布

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

在这里插入图片描述

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