前言

最近發現隨著東西越看越多，有些東西還是會忘，雖然說有加書籤整理，但這樣翻起來還是有點雜，
所以決定來寫文章，當作筆記紀錄，由於是一開始，就挑個輕鬆有趣的主題 ?

至於為甚麼要在手機上跑 Visual Studio Code ?
很簡單，就是懶，廢話不多說讓我們來開始吧!

簡介

由於本篇是屬於輕鬆有趣的文章，所以跳過原理部分。

本次主要會用到的東西

原理是藉由在 Termux 上使用 proot 安裝 Linux，並在 Linux 上安裝 Visual Studio Code Server，
然後由手機的瀏覽器 (e.g. Chrome) 顯示。

Termux 環境建置

安裝 Termux

由於 Play Store 的版本已經棄用，我們可以選擇 F-Droid 或 Github 的版本

注意: Github 版本為 debuggable，與 F-Droid 不通用。

存取手機的儲存空間

為了讓我們可以從 Termux 存取手機的儲存空間，需要進行設定，
打開 Termux，輸入指令，執行後會跳出 Android 的詢問，同意即可

1
termux-setup-storage

termux-setup-storage

更新

這裡我習慣用 apt

1
apt update

apt update

1
apt upgrade

記得輸入 y 後繼續

apt upgrade


途中可能會跳出設定檔版本衝突，如果你沒有做甚麼更改，用 package maintainer's version 即可，輸入 Y

configuration file

安裝 OpenSSH

1
apt install openssh

apt install openssh

配置 SSH server，從電腦打指令 (可選)

為了方便，我們可以配置 SSH server，從電腦上打指令比較方便(本文設備在同一個 local network 下)
當然，你也可以在手機上處理

配置密碼

等一下從電腦登入會用到

1
passwd

passwd

啟動 OpenSSH server

啟動 OpenSSH server

1
sshd

若要關閉 OpenSSH server

1
pkill sshd

確認使用者

確認要登入的使用者

1
whoami

whoami

確認手機 IP

確認手機的 LAN IP，可輸入 ifconfig，你也可以從其他地方看

1
ifconfig

從電腦登入

Windows 10 1809 後已經支援 openssh
從電腦登入，Termux 預設的 SSH port 為 8022

1
ssh -p 8022 user@hostname_or_ip

ssh

Linux 環境建置

安裝 proot-distro

安裝 proot-distro

1
apt install proot-distro

apt install proot-distro

proot-distro list

列出可以用的 Linux distribution、安裝狀態等資訊

1
proot-distro list

proot-distro list

安裝 Linux 發行版

安裝你想要的 Linux 發行版，這裡我選擇 ubuntu

1
proot-distro install ubuntu

proot-distro install ubuntu
proot-distro install ubuntu

登入

1
proot-distro login ubuntu

proot-distro login ubuntu

更新

依照慣例，先更新一下

1
apt update && apt upgrade

apt update && apt upgrade

安裝 wget

安裝 wget，稍後會用到

1
apt install wget

apt update && apt upgrade

配置 Visual Studio Code Server

安裝 Visual Studio Code Server

安裝 Visual Studio Code Server

1
wget -O- https://aka.ms/install-vscode-server/setup.sh | sh

install VS Code Server

列出可用指令

我們可以用 --help 列出可用指令，這裡擷取一部份

1
code-server -h

code-server -h
code-server -h

serve-local

這次我們要使用的是 serve-local，因為 VS Code Server 的服務還是在 private preview，要填表單申請
而且 local 畢竟比較穩定，當然你還是可以去申請

一樣列出可用指令，這裡擷取一部份

1
code-server serve-local -h

serve-local -h
serve-local -h

我們可以自行指定 port , bound interface，VS Code 版本等等…
interface 部分，我自己測試，如果讓他 bind 0.0.0.0 從外部(非 localhost)直接連，
會有部分東西顯示不出來(e.g. extension’s details page)，所以還是走預設讓他 bind 127.0.0.1

啟動 Visual Studio Code Server

版本我選 insiders，首次啟動會要你同意授權條款，同意即可

1
code-serve serve-local --quality insiders

code-serve serve-local --quality insiders

如果要停止，使用 ctrl+c

進入 Web UI

在瀏覽器開啟那串 URL 即可

URL

Web UI

補充 - 從電腦連手機的 Visual Studio Code Server

為了方便，你可以選擇在電腦上處理配置，但由於前面提到的原因，直接連會有些顯示問題，
這裡我們使用 SSH Tunneling 解決

Local Port Forwarding

電腦再開一個 Terminal，使用中保持其存在，從前面得知預設 port 為 8000

Local Port Forwarding 指令語法

1
ssh -L [bind_address:]<port>:<host>:<host_port> <SSH Server>

但別忘了 Termux 預設的 SSH port 為 8022

Local Port Forwarding

進入 Web UI

在瀏覽器開啟那串 URL 即可

URL

補充 - 全螢幕

目前找到比較簡單的方法，但要注意產出的桌面捷徑的 URL 是固定的，如果 tkn 改變了，捷徑會失效

fullscreen

補充 - 安裝 C,C++,debug 相關工具

基本上就跟在 Linux 安裝一樣，既然都裝了就順便寫一下

安裝

1
apt install build-essential gdb

確認 g++ 版本

1
g++ --version

g++ --version

補充 - 安裝 Python

安裝

1
apt install python3

apt install python3

確認 Python 版本

1
python3 --version

python3 --version

補充 - 存取手機儲存空間

我們可以看到，ubuntu 這邊是自己的空間

ls -a

往上層走可以看到手機儲存空間 sdcard

cd ..

建議檔案還是放在 ubuntu 的空間下，(可建個資料夾整理)，避免 coding 時出現權限等奇怪的問題，要拿檔案時再複製

Demo 展示

手機

demo_phone
demo_phone
demo_phone

電腦

demo_phone
demo_phone

結語

可能有人會問為甚麼不用 VNC，一來是 proot 有效能折損，不如直接在手機瀏覽器跑，
再者是因為 Android 12，使用 VNC 等比較吃 CPU 東西的時候，Termux 可能會遇到 Signal 9 的問題

話說不知不覺就寫了一大篇，如果想再更方便一點也可以加個藍芽鍵盤，或是拿平板，
Visual Studio Code 的 extensions 大部分都可以正常安裝，用作簡單的 coding，還是蠻方便的

References