Question

VSCode Extension 是三方插件, 不由 Apache Weex 开发或维护。

功能

• 创建 Weex 项目。
• 支持在 VSCode 对 Weex 的语法支持。
• 检查 iOS 和 Android 开发环境。
• 通过 VSCode 启动 Weex 调试工具。
• 在热更新模式下启动 Android 及 iOS 工程。

VSCode 拓展包包含下面的包:

• weex-new-project - 用于在 VSCode 中创建 Weex 项目。
• weex-lang - 用于在 VSCode 中对最新的 Weex 语法进行支持。
• weex-doctor - 用于检查 iOS 和 Android 本地开发环境。
• weex-debugger - 用于在 VSCode 中启动 Weex 调试工具。
• weex-run - 用于在热更新模式下启动 Android 及 iOS 工程。

你可以通过安装 vscode-weex 拓展来安装上面的所有包。

安装

在 VSCode 拓展面板搜索 vscode-weex 。

拓展包

weex-new-project

VSCode 环境中创建 Weex 工程。

创建 Weex 工程

如何使用

1. 打开 VSCode, 输入 CMD + SHIFT + P or CTRL + SHIFT + P 打开 VSCode 命令行。
2. 输入 weex new project 。
3. 输入 Enter, 然后选择你要创建的项目地址。

截图

添加 Android 工程

如何使用

1. 打开 VSCode, 输入 CMD + SHIFT + P or CTRL + SHIFT + P打开 VSCode 命令行。
2. 输入 weex platform add android project
3. 输入 Enter

截图

添加 iOS 工程

如何使用

1. 打开 VSCode, 输入 CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline。
2. 输入 weex platform add iOS project 。
3. 输入 Enter。

weex-lang

VSCode 针对 Weex 的语法支持。

更详细的内容查，查看: vscode-weex-lang

.

截图

weex-doctor

VSCode 针对开发环境的检查。

如何使用

1. 打开 VSCode，输入 CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline。
2. 输入 weex doctor 。
3. 输入 Enter。

截图

weex-debugger

VSCode 中启动 Weex 调试工具。

如何使用

1. 打开 VSCode，输入 CMD + SHIFT + P or CTRL + SHIFT + P to open VSCode commandline.
2. 输入 weex debug
3. 输入 Enter

更多细节，查看: weexteam/weex-debugger

weex-run

VSCode 环境中运行 iOS/Android/Web 工程。

如何使用

1. 打开通过 VSCode 拓展或 weex-toolkit 生成的项目.
2. 在 VSCode 调试面板下运行项目.
3. 你可以通过修改 .vscode/launch.json 进行配置.

截图

Web

iOS

结果

Android

结果

提示

• 在运行 iOS 或者 Android 项目前请确保你添加可对应工程 （路径与 .vscode/launch.json 中的 projectPath 值保持一致）你可以通过使用 weex-new-project 来添加客户端工程。
• 如果运行失败了，你可以通过 weex-doctor 检查一下你的本地开发环境。
• iOS 环境依赖 XCode ，安装后请打开 XCode 以便完成后续的初始化工作。
• Android 环境依赖 Android studio , Java SDK 1.8 (Windows 需要设置 Java 的环境路径， 教程 ), Android SDK Platform 26 (通过 Android studio 安装), Android SDK Build-Tools 26 (通过 Android studio 安装), Android virtual device (通过 Android studio 安装)
• VSCode 中进行代码断点调试目前还未支持