Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Feishu ExtensionNew to Visual Studio Code? Get it now.
Feishu Extension

Feishu Extension

Feishu Technology

|
5,146 installs
| (0) | Free
The Feishu extension provides developer to create, import, preview and upload Gadget in feishu application.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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:

  1. Make sure the node is installed before using this extension
  2. Some features are required for the Feishu version, please read this usage carefully.

Work area

img

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.

img

Switch account

img

img

Logout

Logout of the current account, the bottom status bar will display [No Account] after logout succeeded.

img

img

Create new project

Click the button or use the [Feishu: Create new application] command to enter the Create Project page.

  1. Input the appId (go to open platform to get the appId of the existing Gadget or new Gadget)
  2. Select project directory - the directory needs to be empty
  3. The project name will be automatically generated according to the previous step, of course, you can also modify it yourself.
  4. Click confirm button

img

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.

img

[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.

img

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.

img

img

Code hints and completions

The extension provides hints and completions for Gadget editor.

img

img

img

img

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. img The setup is successful as shown below img

Output development stage Gadget log

  1. 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 img

  2. 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. img

  3. View the log of Gadget on real device in OUTPUT img

Realtime preview on device

Tips: requires Feishu version>=3.12.0

  1. 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.

  2. 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. img

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. img
  • After few seconds, a confirmation box for debugging will pop up on Feishu app. Click Confirm to enter debugging, and click Cancel to exit. img
  • 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. img
  • The upper right corner of the gadget on the Feishu app will show the connection status of the app and the debugger server img
  • 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 img
  • 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 img
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft