「第2479期」如何在iPad上用vscode写代码

前言

终于找到买iPad的理由了。今日前端早读课文章由@xiong投稿分享。

@xiong，深圳最大夜场高级前端工程师，喜欢钻研技术与生活上碰到的一些命题，并总结分享。

正文从这开始~~

iPad界有一句流行语叫"买前生产力，买后爱奇艺"，刚入手的我一定要防微杜渐，绝不能让这件事发生（狗头）。

说到生产力，一般人会拿平板写文档和画画。作为程序员的我就当然要拿它来编程了。

遗憾的是，使用arm架构的iPad是不支持使用vscode开发的；幸运的是，vscode现在有网页版了。

趁着这次机会，我就来看看vscode网页版在平板上是否能满足需求吧。（答案是能的，大家可以把这篇文章甩给那些买了平板后只拿来看爱奇艺的码农朋友们了。）

方式一：github的vscode网页版

在github的项目上点一下键盘的"."键，就会进入vscode编辑器，可以很方便地修改和提交代码。

不过这个vscode是阉割版的，并不提供代码运行和调试功能，如果想拿来开发是不够用的。这个工具更多适用于当前电脑没有开发环境，或者临时快速修改一下代码就提交的场景而已了。

方式二：windows轻量应用服务器

一开始我想到的是在腾讯云的windows轻量应用服务器上安装vscode来实现平板上写代码的需求的。但可能这个是服务端的windows，不是功能完善的windows，在多个网站上点击下载vscode的按钮都没反应，平板上也登录不了这个服务器，屏幕显示又是4:3比例的小屏，综上各种不好体验，就放弃了。

方式三：code-server

既然github提供的是阉割版的vscode，那我能不能自己搭建一个功能完整的vscode呢？

答案是能的，使用code-server就可以了。经过一轮摸索，我搭建好并且模拟日常开发工作尝试了一遍了。总体感觉不错，能满足一些简单的开发工作，例如编码、运行、调试、安装插件等，但离笔记本原生体验还是有一些距离，比如有时候会断网，反应也没本地开发灵敏等。

至于他的原理，可以理解为code-server就是浏览器版的vscode。它是一个中转站，通过可视化操作在服务器上创建文件，编写代码，运行代码，执行命令等。

1、首先需要一台云服务器。

这里我买了腾讯云的ubuntu服务。

2. 安装code-server

登陆上云服务器后，按code-server的官方文档，应该是可以使用脚本来安装的：

// code-server 地址：https://github.com/cdr/code-server
// 安装命令
curl -fsSL https://code-server.dev/install.sh | sh

但可能是网络原因，安装速度十分慢。

此时我只能先把安装包下载下来，再上传到服务器上了。

上传到服务器可以用scp上传，具体步骤是：

获取公网 IP

登录云服务器控制台，在实例列表页面获取公网 IP。如下图所示：

执行scp命令上传文件，语法为

scp 本地文件地址 云服务器帐号@云服务器实例公网 IP/域名:云服务器文件地址

例如，您需要将本地文件
/Downloads/code-server_3.12.0_amd64.deb 上传至 IP 地址为 129.20.0.2 的云服务器的/home/ubuntu目录下，则执行的命令如下：

scp /Downloads/code-server_3.12.0_amd64.deb root@129.20.0.2:/home/ubuntu/code-server_3.12.0_amd64.deb

接着按向导登录云服务器及输入yes确认上传就行了。上传速度嗖嗖的。

上传完后，就是安装code-server了。安装命令为

sudo dpkg -i code-server_3.12.0_amd64.deb

启动code-server

等待安装完成后，就可以启动code-server了：

code-server --host "0.0.0.0"

注意后面的参数是需要的，否则服务器外面的机器是连不上的。

除了设置这个参数外，还需要在服务器的安全组上设置允许8080端口访问。

配置好了后，就可以在浏览器上使用"公网ip：8080"来访问这个网页版vscode了。

第一次打开会询问密码，密码在
~/.config/code-server/config.yaml文件中。

实测是可以调试的 (o)/~

将这个网站添加到主屏幕上，就能像一个app一样全屏打开vscode了。

让vscode可以在后台一直运行

当关掉腾讯云的登陆窗口后，vscode是会停掉的，此时就需要让他一直后台运行了。步骤如下：

1、安装screen

apt-get install screen

2、安装完成后新建一个窗口,

screen -S codeserver

3、进入窗口后运行code-server，然后 Ctrl+a+d 切换Linux窗口，会发觉它是不会中断的。

给vscode添加中文支持

使用快捷键Ctrl+shift+p，输入configure display language，

然后选择中文就行了。

安装node

作为前端开发自然少不了node，在ubuntu系统下执行以下命令就能安装了。

sudo apt install nodejs npm

然后执行node -v ，如果能看到安装的版本号，说明node已安装好了。

尾声

至此，你的iPad也能使用vscode来愉快地写代码了。实际上，只要有浏览器的地方，无论是用电脑、平板还是手机，你都可以使用它来写代码了，而且开发环境是一致的，也省了很多配置环境的麻烦事了。

很久很久以前，我就觉得背着沉重的电脑回家是件很痛苦的事，于是除了多买一部电脑外做过很多尝试，例如把旧的老台式机搬出来、给小米平板2刷windows系统等，但效果都不太好，这次给平板添加写代码功能也算是其中一个尝试吧。虽然现在可以带轻的笔记本，但假若能带更轻的平板出门又能满足日常需求，岂不是更美滋滋吗？

本文发布于前端早读课
作者：@熊金宝
来源：
https://mp.weixin.qq.com/s/e_S03Y2OrYVZkgt3eB3ejg