Feishu VSCode Extension
Overview
This extension is officially supported by the Feishu open platform, providing functions such as creating, importing, previewing, uploading, and debugging Gadget.
Attension:
- Make sure the node is installed before using this extension
- Some features are required for the Feishu version, please read this usage carefully.
Work area
Commands
Feishu: Switch Account - Login to the Feishu open platform and switch to the current login account
Feishu: Account configuration - Switch account
Feishu: Sign Out - Logout of the current account
Feishu: Create new application - Create a new Gadget project
Feishu: Preview - Choose a mode preview Gadget
Feishu: Preview Mobile - Preview mobile Gadget
Feishu: Preview Window - Preview PC Window Gadget
Feishu: Preview SideBar - Preview PC SideBar Gadget
Feishu: Upload - Choose a mode to upload the Gadget to the open platform, ready to publish
Feishu: Upload PC - Upload the PC Gadget to the open platform, ready to publish
Feishu: Upload Mobile - Upload the mobile Gadget to the open platform, ready to publish
Feishu: Open Log - Send authorization message card for getting the log which generated by dev Gadget running on a real device
Support features
Account management
Add account
Click [Account Area] in the bottom status bar, the account platform selection pop-up window will show on the top of vscode. Click to select the platform, the browser will automatically open the authorized login page. The bottom status bar will display the corresponding account information after authorization succeeded.
Switch account
Logout
Logout of the current account, the bottom status bar will display [No Account] after logout succeeded.
Create new project
Click the button or use the [Feishu: Create new application] command to enter the Create Project page.
- Input the appId (go to open platform to get the appId of the existing Gadget or new Gadget)
- Select project directory - the directory needs to be empty
- The project name will be automatically generated according to the previous step, of course, you can also modify it yourself.
- Click confirm button
Preview on real device
Tips: [Preview PC App Center] requires Feishu version>=3.11.0
Click the Preview button or use the [Feishu: Preview] command and click to select any preview mode to preview on real device.
[Preview Mobile] will open the following QR code interface, scan the code to preview. And also provide a copy QR code address button for developers to use directly.
Modes other than [Preview Mobile] will send a message card to the Feishu application, and click the message card to preview Gadget.
Upload and publish
Click the upload button or use the [Feishu: Upload] command. The upload information input box will pop up at the top. Click the confirmation step after completing the step by step. After success, click the [Go to Developer] pop-up box in the lower right corner to go to the open platform for publishing.
Code hints and completions
The extension provides hints and completions for Gadget editor.
Set the build directory
The purpose of setting the build directory is to tell the compiler where the root directory of the Gadget project is, in order to compile correctly.
root // Specify this directory
├── pages
│ │── home
│ │ ├── home.ttml
│ │ ├── home.js
│ │ ├── home.json
│ │ └── home.ttss
│ └── user
│ ├── user.ttml
│ └── user.js
├── app.js
├── app.json
├── app.ttss
└── project.config.json
The extension sets the opened directory to the build directory of the Gadget project by default.
The setup is successful as shown below
Output development stage Gadget log
Click the button or [Feishu: Open Log] command, Feishu will receive authorization message card for getting the log which generated by dev Gadget running on a real device
Click the message card confirmation button mentioned in the first step. In the left sidebar of VSCode, you will see the currently running dev Gadget, and you can switch the Gadget log output through the OUTPUT selection list.
View the log of Gadget on real device in OUTPUT
Realtime preview on device
Tips: requires Feishu version>=3.12.0
Click on one of the buttons in the Preview Gadget folder, such as Preview On Mobile or Preview On PC Sidebar, and the Gadget package will be compiled and pushed to Feishu in real time.
Once you click on the buttons such as Preview On Mobile or Preview On PC Sidebar, you will be able to trigger local real-time compilation by saving the code, such as COMMAND+S, and pushed to Feishu.
Real device debug
Tips：requires Feishu version>=3.24.0 node version>=11.0.0
- Use vscode to open the gadget program source code project you want to debug, and ensure the following conditions:
- Feishu and vscode plugin login the same account
- The configuration file project.config.json fills in the gadget appId created under the current login account
- Click Open Debugger under Debug Gadget to start debugging.
- After few seconds, a confirmation box for debugging will pop up on Feishu app. Click Confirm to enter debugging, and click Cancel to exit.
- After clicking Confirm on the Feishu app, the gadget will start, and the vscode will automatically jump to the debugger interface. Within the debugger interface, the debugging capabilities provided are as follows：
- call stack view
- memery data view
- breakpoint view
- debug operation etc.
- The upper right corner of the gadget on the Feishu app will show the connection status of the app and the debugger server
- In the process of debugging the gadget, if a breakpoint is hit, gadget runing on the Feishu app will pop up a breakpoint hit prompt box
- If the connection is disconnected, the debugging ends. The end of debugging will trigger the following actions:
- Exit the gadget on the Feishu app directly
- Feishu vscode plugin will exit the debugging state
