乐鑫 Web IDE 是基于Eclipse Theia的框架，支持ESP-IDF VS Code 插件同时具备多项辅助工具。您可以观看我们在 Espressif DevCon22 上的演示视频​​​​​​​，了解它的实际应用。

【乐鑫开发者大会-21】搭载 ESP-IDF Visual Studio Code 插件的乐鑫 Web IDE

若您此前没有接触过 Eclipse Theia，它是一个开源框架，为开发人员提供了一个平台，可以使用 TypeScript 编程语言构建云和桌面集成开发环境（IDE）工具。Eclipse Theia 的用户界面基于流行的 Visual Studio Code。此外，开发人员可以利用 VS Code 提供的扩展插件，或者使用OpenVSX注册表中的扩展插件。

乐鑫 Web IDE 不仅支持ESP-IDF VS Code 插件的大部分功能，还针对芯片串口连接开发了特定指令。为此，我们研发了两款附加实用工具：

  1. ESP-IWIDC (Espressif IDF Web Desktop Companion)支持通过 websocket连接 Web IDE 与计算机上连接的串口设备。此工具基于 Python 开发，提供设备烧录和串口监视功能。​​​​​​​
  2. esptool-js作为 ESP-IDF esptool 的 TypeScript 实现，支持使用WebSerial API与芯片通信。此工具以 NPM 包形式发布，可在任何 JS 工程中使用。

为了您能便捷地使用上述工具，Web IDE 提供了下列可用选项：

对于 ESP-IWIDC，您可以在Remote（远程）菜单下，选择Remote Flash（远程烧录）或Remote Monitor（远程监控）。对于 esptool-js，您可以在Remote（远程）菜单下，选择Flash with Webserial（Webserial 烧录）或Monitor with Webserial（Webserial 监控）。请在进行烧录或监控前指定对应的串口设备。

乐鑫 Web IDE 支持以下两种运行方式

  • 直接从源代码编译运行；
  • 使用附带的 Dockerfile 构建一个 Docker 容器
  1. 编译源码运行（需使用 NodeJS 和 yarn 编译工程）
git clone https://github.com/espressif/idf-web-ide.git cd idf-web-ide yarn cd browser-app yarn run start — port=8080

在浏览器中打开127.0.0.1:8080（推荐使用 Chrome 浏览器）

2. 使用 Docker 运行

拉取最新的 docker 镜像，命令如下：

docker pull espbignacio/idf-web-ide

或从 IDF-Web-IDE 仓库构建 docker 镜像，命令如下：

docker run -d -e IWI_PORT=8080 -p 8080:8080 --platform linux/amd64 -v ${PWD}:/home/projects espressif/idf-web-ide

在浏览器中打开127.0.0.1:8080（推荐使用 Chrome 浏览器）

如需使用ESP-IWIDC，请点此获取 Windows 的可执行文件，或使用仓库中的 Python 脚本。

运行可执行文件，启动 ESP-IWIDC：

.\dist\main.exe — port PORT

查看可用端口

.\dist\main.exe

如果希望直接使用 ESP-IWIDC 的 Python 脚本，请确保已安装所需的 Python 软件包，安装命令如下：

pip3 install -r ${ESP-IWIDC}/requirements.txtpython3 main.pypython3 main.py - port [SERIAL_PORT_OF_ESP_32]

使用 esptool-js 命令则无需额外安装任何内容。

使用 Docker 容器的优势在于，容器中已配置 ESP-IDF 及支持 ESP32 的 QEMU 分支，无需额外为 IDE 配置ESP-IDF。打开任意 ESP-IDF 工程即可开始开发！

Clang OpenVSX 插件为 Espressif Web IDE 提供 C/C++ 语言支持。该插件通过 build/compile_commands.json 文件实现 Go to declaration 功能以及提供对其他语言的支持。

小结

欢迎使用乐鑫 Web IDE，您可以随时联系我们提出改进意见！您还可以浏览我们之前的博客，了解更多有关ESP-IDF VS Code 插件的信息。

相关链接：

  1. ESP-IDF Web IDE
  2. Eclipse Theia
  3. ESP-IDF VS Code 插件
  4. ESP-IWIDC (Espressif IDF Web Desktop Companion)
  5. esptool-js
  6. OpenVSX 注册表
  7. Clang OpenVSX 插件