# Introduction

WARNING

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

Last Updated: 5/27/2019
Excellent docUnusable doc