三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

手机秒变开发机:vscode_for_android 本地部署完整实战指南

手机秒变开发机:vscode_for_android 本地部署完整实战指南

手机秒变开发机:vscode_for_android 本地部署完整实战指南

【免费下载链接】vscode_for_androidPort VS Code to Android and support local operation项目地址: https://gitcode.com/gh_mirrors/vs/vscode_for_android

出差路上想改个线上 bug,电脑没带,只能对着手机干瞪眼?vscode_for_android(应用名 Code FA)就是为这种场景准备的:它把 VS Code 服务端(code-server)放进安卓本地运行,配合 WebView 渲染完整编辑器界面,全程离线可用。这篇实战笔记从运行原理讲起,带你一步步完成部署、换版本、装依赖和排错。

先搞懂一件事:它凭什么能在手机上跑 VS Code

手机没有 x86 桌面环境,也没法直接安装 VS Code。Code FA 的解法是"四件套分工":

角色承担的任务对应位置
Flutter 壳应用入口、初始化进度界面、内置终端lib/main.dart、lib/terminal_page.dart
proot + Ubuntu提供隔离的 Linux 运行环境,相当于手机的"轻量虚拟机"lib/script.dart 中的安装流水线
code-server真正的 VS Code 服务端,监听本地端口assets/code-server-4.103.1-linux-arm64.tar.gz
Android WebView把本地地址上的编辑器界面渲染出来android/.../WebViewFragment.java

把四个角色串起来的是一段启动流水线,核心逻辑都写在 核心脚本 里:

start_vs_code(){ # 依次执行五步 install_proot_distro # ① 安装 proot-distro 工具 install_ubuntu # ② 解压 Ubuntu 根文件系统 install_vs_code # ③ 解压 code-server 到 /opt gen_code_server_config # ④ 生成 config.yaml(端口 20000) login_ubuntu # ⑤ 以 proot 登录并拉起 code-server }

服务启动后默认监听0.0.0.0:20000,WebView 直接加载本地页面,所以断网也能用——这是它和云端 IDE 最本质的区别:代码、服务、编辑器全在手机里。

部署前先自查:3 分钟确认设备达标

动手前对着这张表过一遍,能省下大量返工时间:

检查项达标要求怎么确认
系统版本Android 5.0(API 21)及以上设置 → 关于手机
CPU 架构arm64(v8a)adb shell getprop ro.product.cpu.abi
剩余存储至少 1.5GB设置 → 存储
构建环境Flutter 3.3+ / Dart 3.3+flutter --versiondart --version
网络首次部署需要稳定 WiFi后续日常运行可完全离线

💡 架构不匹配是最高频的翻车点:项目内置的 code-server 与 Ubuntu 镜像都是arm64 版本,在 x86 模拟器上跑不起来,务必先确认真机架构。

零基础部署:跟着这 6 步走

整个部署的核心思路只有一句话:把运行时留给手机自己解压,你只负责把安装包放到 /sdcard

第 1 步:拉取项目源码

git clone https://gitcode.com/gh_mirrors/vs/vscode_for_android

执行说明:将项目克隆到当前目录下的 vscode_for_android 文件夹中,网速慢时耐心等待即可。

第 2 步:构建 release 安装包

cd vscode_for_android flutter build apk --release

执行说明:首次构建会拉取依赖,耗时几分钟属正常。产物在 build/app/outputs/flutter-apk/ 目录下。

第 3 步:安装 APK 到手机把上一步产物传到手机并安装。若系统提示"安装被阻止",去设置里允许"未知来源应用"。

第 4 步:准备 code-server 安装包从 code-server 发布页下载code-server-4.103.1-linux-arm64.tar.gz,放到手机存储根目录(/sdcard)。

⚠️ 两条铁律:不要解压不要改名。应用首次启动时会自己解压并搬运到 Ubuntu 环境里,文件名是匹配逻辑的一部分。

第 5 步:首次启动,耐心等初始化打开 Code FA,界面会显示进度条和日志。首次要完成 Ubuntu 根文件系统 + code-server 的解压,约 500MB 的写入量,一般需要 3~5 分钟,期间别锁屏

执行说明:这一步由install_ubuntuinstall_vs_code完成,进度会实时回传到 Flutter 界面,中途强退会导致需要重新初始化。

第 6 步:进入编辑器初始化完成会自动跳转到 WebView 页面,localhost:20000上的 VS Code 界面随即出现,新建文件、装插件、开终端都跟桌面版一致。

想换 code-server 版本?两条路任选

内置默认版本是 4.103.1,但项目支持快速升级到任意 arm64 版本,两种方式按场景挑:

方式 A:用版本文件控制(日常推荐)

echo "4.13.0" > /sdcard/code_version

执行说明:在设备存储根目录创建 code_version 文件,内容只写版本号,千万不要带换行符。随后把对应版本的 code-server 包放进 /sdcard,重启应用即可生效。

方式 B:改源码常量后重新构建

static const String defaultCodeServerVersion = "4.13.0"; // 修改 lib/config.dart

执行说明:改完 版本配置 后重新执行flutter build apk --release打包。适合需要固定版本号、做定制分发的场景。

在手机上装依赖:别踩"不会用 apt"的坑

Code FA 里的 Linux 环境是标准 Ubuntu(不是 Termux),装任何东西都用 apt,别再搜"Termux 安装 xx"的教程。

apt update # 先同步软件源,跳过这步大概率装不上 apt install python3 clang # 示例:安装 Python 和 C 编译器

执行说明:项目已默认把软件源切到清华镜像(见 script.dart 的 change_ubuntu_source),国内网络下 apt 速度通常不错。Git、Node、中文字体等需求,换成对应包名即可。

常见问题排查手册

现象大概率原因处理办法
启动一直卡在初始化/sdcard 里没有匹配的 code-server 包核对版本与文件名,重新放置后重启应用
进入编辑器后白屏本地服务没起来查看初始化日志;检查存储空间是否被占满
换了版本却不生效code_version 文件带了换行符printf "4.13.0" > /sdcard/code_version重写
apt 安装报 404忘了先 update先执行apt update再安装
编辑代码明显卡顿插件过多、动画全开参考下节的降负载配置

进阶优化:让手机写代码更顺手

降低渲染负担:在 VS Code 设置里关掉非必需功能,小屏上的流畅度提升非常直观。

{ "editor.minimap.enabled": false, "workbench.activityBar.visible": false, "window.zoomLevel": 1.1 }

触控体验微调:双击选词、三击选行、长按拖动选择这些手势 WebView 默认就支持;把光标调大、开启触摸反馈,误触率会明显下降。

善用分屏:Android 分屏模式下,上屏开代码、下屏开终端,体验接近桌面双窗口。

低配设备建议:别同时开太多插件,把extensions.autoUpdate关掉,省下后台流量和 CPU。

写在最后

vscode_for_android 的价值不在于替代电脑,而在于让"随时改两行代码"成为现实:code-server 完全本地运行、断网可用;升级版本只改一个文件;装依赖就是标准 apt——所有技术栈都是现成的,学习成本极低。

下一步建议你:

  1. 按本文 6 步完成一次部署,先跑通默认版本;
  2. 用 code_version 文件升级到新版本,感受版本管理流程;
  3. 把 git、python、node 等常用依赖装齐,手机就是你的随身开发机。

部署遇到问题,回看上面的排查手册,或直接查看 项目源码 与 中文说明 里对应模块的注释——多数答案都写在代码里。祝你顺利把手机变成生产力工具!

【免费下载链接】vscode_for_androidPort VS Code to Android and support local operation项目地址: https://gitcode.com/gh_mirrors/vs/vscode_for_android

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

← 返回列表