Introduction

Features

• Creating weex project.
• Weex language support for VSCode.
• Checking iOS and Android develop environment.
• Launch weex debugger terminal to debug your code.
• Runing iOS or Android project with hot reload.

The VSCode extension mainly contains the following packages:

1. weex-new-project - used for creating weex project in VSCode.

2. weex-lang - support latest weex language for VSCode.

3. weex-doctor - check the iOS and Android develop environment on your platform.

4. weex-debugger - launch weex debugger terminal to debug your weex code.

5. weex-run - run iOS or Android project under VSCode (support hot reload).

You can install below packages by just install the vscode-weex extension.

Install

Searching vscode-weex on VSCode Extension panel -> Install.

Packages

weex-new-project

This extension is used for creating weex project under VSCode environment.

Create weex project

How to use

1. Open your VSCode, then type CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline.
2. Type weex new project.
3. Type Enter, then choosing a address for your project.

Snapshot

Add android project

How to use

1. Open your VSCode, then type CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline.
2. Type weex platform add android project
3. Type Enter

Snapshot

Add iOS project

How to use

1. Open your VSCode, then type CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline.
2. Type weex platform add iOS project
3. Type Enter

weex-lang

Weex language support for VSCode.

More detail you can see: vscode-weex-lang.

Snapshot

weex-doctor

Extension for checking Weex develop environment.

How to use

1. Open your VSCode, then type CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline.
2. Type weex doctor
3. Type Enter

Snapshot

weex-debugger

Launch weex debugger terminal for VSCode.

How to use

1. Open your VSCode, then type CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline.
2. Type weex debug
3. Type Enter

More detail you can see: weexteam/weex-debugger

weex-run

Runing iOS/Android/Web project under the VSCode.

How to use

1. Open a weex project created by VSCode extension or weex-toolkit.
2. Run the project under the VSCode debug panel.
3. You can also edit the configuration under the .vscode/launch.json.

Snapshot

Web

iOS

Result

Android

Result

Note

• Run IOS or Android APP make sure you have added native project (Path of which you launch.json key projectPath set), you can use weex-new-project add native project

• If the run fails, You can try to check the environment by weex-doctor

• IOS Environmental dependence: xcode and open once

• Android Environmental dependence: Android studio, Java SDK 1.8 (Windows need set Java home https://developer.android.com/studio/install?hl=zh-cn), Android SDK Platform 26 (Install by Android studio), Android SDK Build-Tools 26 (Install by Android studio), Android virtual device (Install by Android studio)

• Debugging in the vscode editor breakpoint is not yet supported

Issues

• weex-cli/vscode-weex/issues