Feishu VSCode Extension
This extension is officially supported by the Feishu open platform, providing functions such as creating, importing, previewing, uploading, and debugging mini app.
- Make sure the node is installed before using this extension
- Some features are required for the Feishu version, please read this usage carefully.
Feishu: Connect to Feishu - Login to the Feishu open platform
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 mini app project
Feishu: Preview - Choose a mode preview mini app
Feishu: Preview Mobile - Preview mobile mini app
Feishu: Preview Window - Preview PC Window mini app
Feishu: Preview SideBar - Preview PC SideBar mini app
Feishu: Upload - Choose a mode to upload the mini app to the open platform, ready to publish
Feishu: Upload PC - Upload the PC mini app to the open platform, ready to publish
Feishu: Upload Mobile - Upload the mobile mini app to the open platform, ready to publish
Feishu: Open Log - Send authorization message card for getting the log which generated by dev mini app running on a real device
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.
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 app or new app)
- 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 mini app.
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 mini app editor.
Set the build directory
The purpose of setting the build directory is to tell the compiler where the root directory of the mini app project is, in order to compile correctly.
root // Specify this directory
│ │── home
│ │ ├── home.ttml
│ │ ├── home.js
│ │ ├── home.json
│ │ └── home.ttss
│ └── user
│ ├── user.ttml
│ └── user.js
The extension sets the opened directory to the build directory of the mini app project by default.
The setup is successful as shown below
Output development stage mini app log
Click the button or [Feishu: Open Log] command, the Feishu app will receive authorization message card for getting the log which generated by dev mini app 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 mini app, and you can switch the mini app log output through the OUTPUT selection list.
View the log of mini app 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 Mini App folder, such as Preview On Mobile or Preview On PC Sidebar, and the Mini App 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.