Introduction

:::danger VSCode Extension is a third party plugin, and is not developed nor maintained by Apache Weex. :::

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:

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

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

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

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

  • 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

Create 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 android 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 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 Doctor 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

Run Web Snapshot

iOS

Run iOS Snapshot

Result

Run iOS Result Snapshot

Android

Run Android Snapshot

Result

Run Android ResultSnapshot

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, guide), 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