Author | Starry Sky

I. Introduction

Baidu Developer Tools is a one-stop applet development tool created by Baidu Smart Applet Open Platform, which provides functions such as coding, debugging, testing, uploading, and project management. The latest stable version is V3.59, which can be downloaded from the official website of Baidu Smart Mini Program. The next major version is being developed for Baidu Developer Tools 4.0 (hereinafter referred to as: 4.0). Migrating the local VSCode development environment to 4.0, writing plug-ins and integrating them into 4.0, these aspects will help you quickly understand the new features of 4.0, and start building a small program IDE environment of your own;

How to quickly develop Baidu Mini Programs

If you don't know much about Baidu applet development, here is a brief introduction to how to quickly develop a Baidu applet:

Step 1: Download the Baidu developer tool. If you have not registered Baidu Mini Program and want to try to develop it, you can use the Mini Program test account first for development experience, but the test account has some functional limitations; For development and release, you need to register an APPID;

Step 2 : Quickly access the Baidu applet according to your own situation

1. If you already have a WeChat applet and want to convert it to a Baidu applet => Open the Baidu developer tool and use the "Move" in the tool to quickly migrate to a Baidu applet.

2. If you want to experience the functions of Baidu Mini Programs => Open Baidu Developer Tools, select "Page Template", you can quickly generate a Baidu Mini Program project with complete functions.

3. If you want to directly enter Baidu applet development => open Baidu developer tools, select "My Project", you can quickly generate a blank Baidu applet project.

The detailed operation link can be viewed on the official website.

2. Background introduction

Have you encountered the following scenarios during the development of Mini Programs using existing developer tools:

1. I want to complete the development in the developer tool, but the development environment of the tool is quite different from the IDE environment configuration I am familiar with, which leads to additional learning costs.

2. There is no rich editor plug-in ecology to assist development, resulting in inconvenient development.

Therefore, most of them choose to develop in their own IDE, and then import the code into the developer tool for debugging, which is a cumbersome process.

In order to solve the above scenarios and provide you with a consistent development experience, we are developing version 4.0, which is based on VSCode (a free cross-platform source code editor developed by Microsoft) for secondary development, mainly including the following New features:

①Optimize the development experience, Baidu developer tools are fully compatible with VSCode, and support more flexible custom development;

②Support the Microsoft plug-in market, with richer personalized configuration and stronger scalability (currently a whitelist mechanism);

③Optimize the loading speed of memory and first screen items, with better performance and higher stability.

At present, 4.0-beta has been released on the official website, you can go to the official website to download, remember to select "latest beta version (4.0-beta)".

3. 4.0 Overall Design Ideas

Before 4.0

The overall idea is to divide the whole into Main Process and Renderer Process layers based on Electron;

A set of its own plug-in mechanism and event system is designed on Electron, which separates all business logic from the main body of developer tools;

The main body of the developer tool provides basic Services for each part, and each core module and auxiliary module are based on Services, and are independently developed through plug-in and event-driven methods;

If there is a need for external expansion, a Renderer Extension can be added based on this plug-in mechanism and event system;

Finally, the overall assembly is completed by the developer tool main body.

After 4.0

The overall idea is to introduce VSCode as an underlying framework Vender into the IDE, and the upper IDE completes the integration with VSCode by adding a SWAN IDE API module; accomplish;

As a whole, you can see that the IDE will be divided into 4 layers:

①VSCode layer: Added developer tool customization extension point and SWAN IDE API related capability support;

②SWAN IDE API layer: wrap the extension points into different APIs for the upper-level developer tool business layer to use;

③Built-in VSCode plug-in layer: the bottom business layer of developer tools, build business modules, call SWAN IDE API to complete interaction with IDE framework;

④ External VSCode plug-in layer: The upper-level business of developer tools extends the VSCode plug-in of developer tools custom plug-in.

Here, because our extension needs to do some UI interaction and needs to be extended on the basis of IDE, we designed the Widget extension point. In addition to directly integrating VSCode Extensions, it also adds the ability of IDE Extensions; and the development of VSCode Extensions The only difference is that the API capability that can be extended to the core plug-in or main body of the IDE is newly encapsulated; you can independently expand according to your needs to build your own small program IDE.

4. Migrate the local VSCode development environment to 4.0

Step 1: Plugin Relocation

Developer Tools Editor sidebar:

① The existing capabilities of Baidu developer tools are the same as VSCode functions

② The plug-in capabilities customized by Baidu developer tools are mainly quality inspection tools

③ The new capabilities of Baidu Developer Tools 4.0, the same as the VSCode function

Developer Tools Plugin Installation:

According to the VSCode installation method, search for the plugins you use daily in ② and install them

Search @builtin for built-in plugins, @recommended for recommended plugins, and @popular for popular plugins

Because Baidu developer tools are compatible with VSCode 1.63.2 version and prevent the installation of too many plug-ins from affecting performance, 4.0 uses a whitelist mechanism to support common plug-ins for small program development, so currently there is no comprehensive search for VSCode plug-ins, the following Several types of commonly used plug-in descriptions are recommended, and detailed content items can be viewed directly in Baidu developer tools.

Built-in plugin
Baidu applet development assistant: Baidu applet development assistant, supports syntax highlighting, code inspection, smart prompts for swan files, swan api code completion, and smart prompts; you can also search and install directly in your own VSCode.
Performance tool: Baidu applet performance testing tool, which can be used to perform performance testing during daily development and give optimization suggestions, which can help improve the quality of applet in real time during development.
Mini Program Diagnosis: Baidu Mini Program Diagnosis Tool will automatically detect possible performance and abnormal problems in your Mini Program when sending packages, and give optimization suggestions, which can help you quickly understand the quality of online Mini Programs in developer tools .
Cloud function local debugging: Baidu cloud function local debugging tool,
px to rpx: Baidu applet unit conversion tool, px to rpx.
Common IDE plugins
Code Spell Checker: Helps find misspelled words in code.
ESLint: Detect possible code style and quality issues.
Prettier Formatter for Visual Studio Code: Formats possible code style and quality issues, and works with ESLint.
GitLens: Quickly view code commit history.

Step 2: Layout Migration

Switch the emulator to the right position to make development more focused; if you are developing intensively, you can hide the emulator.

Switch the theme color to your favorite color system and theme.

Step 3: Configuration item definition

cmd + shift + p to copy your settings `settings.json`.

Step 4: Shortcut key definition

Common development and applet function shortcut keys support customization.

Shortcuts to quickly migrate your own editor

5. Write a plug-in and integrate it into 4.0

The development of plug-ins is the same as the routine development of VSCode. It is only necessary to pay attention to the fact that there is a whitelist mechanism. Therefore, if you want to share it with others, you need to "apply for a whitelist for your own plug-in ID". The specific development steps:

Step 1: Write a plugin according to the VSCode plugin mode

npm install -g yo generator-code
yo code

Step 2: Package it into a VSIX plug-in, install it into Baidu developer tools, and perform functional testing

"Install from VSIX", install it into Baidu Developer Tools, and perform functional testing.

If it is only for your own use and the test is successful, you can directly import it like this. If you want to share it with others, continue to the next steps.

Step 3: Publish to the Microsoft Plug-in Marketplace

Step 4: Plug-in ID application whitelist

Since the tool is currently in beta version, the plug-in application entry is not open for the time being. You can leave a comment on the community post ( https://smartprogram.baidu.com/forum/topic/show/156624 ) to apply for the plug-in ID developed by yourself to be developed by Baidu You are welcome to recommend the VSCode plug-in items that you find useful. We will regularly update the VSCode plug-ins in the developer tools.

6. Summary of experience

The above is the basic introduction of 4.0, and some summary of experience in this 4.0 upgrade process.

technical exploration

The VSCode open source version has a huge amount of code. It is extremely important to understand the basic organizational structure and design ideas of the VSCode source code before secondary development based on VSCode. 4.0 In the initial design, the IDE and VSCode were combined with two experiments; the first was to integrate the entire IDE into VSCode, and the second was to introduce VSCode as an underlying dependency into the existing IDE. In consideration of the composition of the existing developer tools and the cost of getting started with VSCode, the second option was finally chosen. Based on the internal extension points of VSCode, the toolbars, simulators, debuggers and other modules of the developer tools were added, and some VSCode modules were opened. The API capability is used by the upper layer of the tool, and new functions are added by means of extension points as much as possible, and the source code changes are small, which is convenient for future iterative upgrades.

tool use

Secondary development based on VSCode is the direction of the transformation of developer tools. I hope it can help you develop mini programs more conveniently. More and more complete tutorial materials of developer tools can be viewed on the official website of mini programs.

If you want to complete the development in your familiar IDE, such as building a complete applet development environment directly in VSCode, you can also configure it based on VSCode + CLI. For details, see the command line tool swan-toolkit provided by Baidu Developer Tools .

Also, there are many interesting configurations, you can play together and unlock new ways to play~