How Baidu’s New DevTools 4.0 Transforms Mini‑Program Development with VSCode

Introduction

Baidu Developer Tools is the official one‑stop IDE for Baidu Smart Mini‑Programs, offering coding, debugging, testing, uploading, and project management. The stable release is V3.59, and a major upgrade to version 4.0 is under development. This guide introduces the new features, overall design, migration from a local VSCode setup, and how to write and integrate plugins.

Quick Start Guide

Download Baidu Developer Tools. New users can start with a test account (limited functionality) or register an APPID for full development and publishing.

Choose a migration path based on your scenario:

Existing WeChat Mini‑Program → use the built‑in “搬家” (migration) feature to convert it.

Explore Baidu Mini‑Program features → select a page template to generate a complete project.

Start from scratch → create an empty project via “我的项目”.

Background Problems

Developers often face a mismatch between the built‑in tool’s IDE and their familiar editors, leading to extra learning costs and a lack of rich plugin ecosystems. Consequently, many prefer to develop in their own IDE (e.g., VSCode) and then import code for debugging, which is cumbersome.

4.0 Design Overview

Before 4.0

The tool was built on Electron, separating the Main Process and Renderer Process. A custom plugin mechanism and event system isolated business logic from the core tool, allowing extensions via a Renderer Extension.

After 4.0

Version 4.0 embeds VSCode as a base framework (Vender) and adds a SWAN IDE API layer to expose selected VSCode capabilities. The architecture consists of four layers:

VSCode layer – custom extension points and SWAN IDE API support.

SWAN IDE API layer – wraps extension points as APIs for the upper‑level tool.

Built‑in VSCode plugin layer – core business modules that call the SWAN IDE API.

External VSCode plugin layer – user‑defined VSCode extensions.

Because the beta version enforces a whitelist for plugins, only approved extensions are available.

Migrating a Local VSCode Environment to 4.0

Plugin migration – map existing capabilities (e.g., quality‑check tools) to the new whitelist mechanism.

Layout migration – move the simulator to the right side, hide it for focused development, and adjust theme colors.

Configuration migration – copy the settings.json file (Cmd + Shift + P → “Preferences: Open Settings (JSON)”).

Shortcut migration – define custom keybindings for common development and mini‑program functions.

Developing and Integrating a Plugin

Plugin development follows the standard VSCode extension workflow, with the additional step of packaging the extension as a VSIX file for Baidu Developer Tools.

npm install -g yo generator-code
yo code

After coding, package the extension into a VSIX, install it in the Baidu tool for functional testing, and then publish it to the Microsoft Marketplace. Because the tool is in beta, plugin IDs must be submitted for whitelist approval via the Baidu Smart Program forum.

Summary and Insights

Version 4.0 achieves a lightweight integration with VSCode, minimizing core code changes while exposing VSCode APIs for extensibility. Developers can continue using familiar VSCode extensions, but only whitelisted plugins are usable in the beta. The new architecture improves performance, memory usage, and startup speed.

Useful Links

Download Baidu Developer Tools: https://smartprogram.baidu.com/docs/develop/devtools/history/

Command‑line tool (swan‑toolkit): https://smartprogram.baidu.com/docs/develop/devtools/commandtool/

VSCode extension generator: https://github.com/Microsoft/vscode-generator-code

VSCode extension tutorial: https://code.visualstudio.com/api/get-started/your-first-extension

VSIX sample (Hello World): https://github.com/Microsoft/vscode-extension-samples/tree/main/helloworld-sample