从零开始搭建一个iPad上可用的”vscode”
本文最后更新于 651 天前,其中的信息可能已经有所发展或是发生改变。

众所周知,iPad上没有官方的vscode客户端,我们所搭建的也不是一个真的vscode,而是基于vscode项目而衍生的code-server。除了让它能够在服务器上运行之外,开发者并没有做太多的改动,所以你使用的时候并不会感觉到有多大异样。

并且,code-server的本质是一个网站,这让你不只可以在iPad上访问,也可以在Android平板、手机,甚至树莓派等一切有现代网页浏览器支持的设备上使用。当然,在有微软vscode官方支持的平台,更建议用vscode直接通过SSH连接服务器。

准备服务器环境

租用服务器

如果你的PC有一个固定的公网IP,且可以运行Linux/macOS,可以直接跳到“安装code-server”。 但大部分人都没有,所以还是自己租服务器吧……

我使用的是Vultr的服务器,单核,1024M内存,25G SSD,Ubuntu 20.04,加上自动备份(我手贱)一个月6美元,能用支付宝。这个配置低于官方推荐配置,不过足够让code-server流畅运行了。

建议不要用Windows,授权费非常贵,而且运行起来也没有Linux有效率。推荐选择Ubuntu、CentOS、Debian等系统。

国外(尤其是美国)的服务器,相比来说网络带宽比较高(比如vultr好像不限制带宽),有IPv6(某些校园网可以免流),也可以用来做一些不能明说的事情。国内的服务器提供商,如阿里、腾讯、华为,很多有学生优惠,10块钱一个月都能租到服务器;而且国内访问起来也会快很多。

具体的购买服务器流程,这里不再赘述,选择配置可以与我的相似,或者更高点,如果还是有困难的话可以去搜索教程。

SSH

SSH客户端,我推荐Termius,界面美观,多平台同步。GitHub Student Developer Pack自带专业版授权,只要你还是学生,就可以白嫖。

为了便捷访问服务器,少输密码,可以生成RSA密钥,将公钥存放在服务器之后SSH服务器就不需要输入密码了。这方面还是需要自行寻找教程,推荐探索一下使用Windows自带SSH命令的方法。

有了SSH,我们就能够像是在自己电脑上输命令一样,在服务器上输命令了。当然,不配置其实也行,只不过每次都需要去云服务商管理后台来操控。

SSH客户端长这样,以Termius为例
Termius界面

一些SSH客户端自带SFTP功能,可以便捷地在服务器与你的电脑之间传输文件。但是很多时候,速度不尽如人意,这时我推荐WinSCP客户端,传输速度会快很多。

请注意,Linux的文件系统与Windows的有很大不同。如果你常用Android手机或者macOS电脑(其实是类UNIX),应该会觉得有点熟悉。

安装与运行code-server

安装其实是最简单的。直接在终端中输入如下命令:

curl -fsSL https://code-server.dev/install.sh | sh

然后你就可以看到code-server被安装到了你的服务器上。

可以直接在终端中输入

code-server

来运行code-server。它会监听8080端口,也就是说,你输入localhost:8080就可以访问了。

这个时候只能使用服务器的内网访问,和本地的vscode没啥区别,如果想将它开放至Internet,随处都可以访问,可以在后面添加--host参数。

如果想用HTTPS访问,以获得最佳兼容性,可以加上--cert参数。后面也可以加上你自己搞到的HTTPS证书(如果有)。

后面可以接更多的参数,可以输入code-server --help来查看。

code-server运行的时候会占用当前终端,不会后台运行,所以可以在每次使用时链接SSH开启。或者也可以使用

screen -S screen_name
code-server (options)

然后按Ctrl+A+D使其后台运行。screen_name是screen的名字,(options)是自定义的参数。这样你就可以把code-server挂在后台,同时处理多项任务了。

现在,你就可以使用服务器IP:8080来访问你的code-server。建议此处先使用桌面端浏览器来访问。

配置开发环境

这一部分,用过vscode的同学应该不会陌生,大同小异罢了。主要面向C++和Python。

编译器配置

GCC、G++已经内置在了系统内,无需安装,但调试用的GDB需要安装:

(下面的命令均以Ubuntu/Debian为例;如果用的是root用户登录,不需要再输sudo)

sudo apt install gdb

有时候,Python也已经内置在系统内,但是版本较老。比如2021/2/2的最新版本是Python 3.9.1,就可以使用

sudo apt install python3.9

来安装新版本。如果你需要下载Python库,还需要

sudo apt install pip3

以安装pip。

插件

众所周知,vscode的灵魂在于插件。由于没有添加微软的一些专有代码,code-server并不能连接完整的微软插件商店,不过我们可以在网页版插件商店中找到相应的插件,点击Download Extension,上传至服务器,然后手动安装就可以使用了。

插件下载方法

在这里下载之后,将其传到服务器任意目录。打开你的code-server,按Ctrl+Shift+P,打开命令窗口,输入install from vsix,回车,然后手动浏览刚刚上传的插件并安装。

如果有部分插件安装失败,可以试着用code-server自带的插件商店安装。

这里推荐我使用的一些插件。

C++:

  • Better C++ Syntax by jeff-hykin
  • C/C++ by ms-vscode
  • C/C++ Themes by ms-vscode
  • C++ Intellisense by austin
  • CMake by twxs
  • CMake Tools by ms-vscode

Python:

  • Python by ms-python
  • Pylance by ms-python

其他:

  • GitHub Pull Requests and Issues by GitHub
  • GitLens by eamodio
  • One Dark Pro by zhuangtongfa
  • Rainbow Brackets by 2gua
  • Chinese (Simplified) Language Pack for Visual Studio Code by MS-CEINTL
  • markdownlint by DavidAnson

工作区.vscode文件夹

这本应该是最难的一步,但是微软给了一个教程,我们可以直接抄作业。主要针对于配置十分繁杂的C++,Python的话应该很简单。

首先在code-server中打开一个文件夹,这个文件夹就是你的一个工作区,你可以把代码文件存放在里面。你可以把其他位置的文件夹加入工作区(当然,应该必须是服务器上的),也可以打开不同的文件夹/工作区。

然后在这个文件夹中新建名为.vscode的文件夹,用来存放code-server适用于该工作区的配置文件(你写的代码别放在这儿),新建launch.json和tasks.json两个文件。

在launch.json中,输入:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "g++ build and debug active file",
      "type": "cppdbg",
      "request": "launch",
      "program": "${fileDirname}/${fileBasenameNoExtension}",
      "args": [],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [],
      "externalConsole": false,
      "MIMode": "gdb",
      "setupCommands": [
        {
          "description": "Enable pretty-printing for gdb",
          "text": "-enable-pretty-printing",
          "ignoreFailures": true
        }
      ],
      "preLaunchTask": "g++ build active file",
      "miDebuggerPath": "/usr/bin/gdb"
    }
  ]
}

这些内容。然后在tasks.json中输入:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "shell",
      "label": "g++ build active file",
      "command": "/usr/bin/g++",
      "args": ["-g", "${file}", "-o", "${fileDirname}/${fileBasenameNoExtension}"],
      "options": {
        "cwd": "/usr/bin"
      },
      "problemMatcher": ["$gcc"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

然后回到你的工作区根目录,新建一个cpp文件,写个hello world啥的。按下F5,可以开始调试。你所看到的应该是类似于这样的:

调试页面

每次打开code-server的第一次调试,都会跳到“输出”tab,切回“终端”就能看到输出结果了。

在不同终端上的访问

在Windows上,推荐使用Chromium内核的浏览器进行访问,包括但不限于Chrome、微软Edge、360等浏览器。vscode基于Electron,Electron又使用了Chromium,所以code-server在Chromium内核上理应表现更好。

在Android上,可以随便找个浏览器访问(QQ浏览器不知道能不能完美使用,不知道那个X5内核本质上是什么)

在iOS和iPadOS上,Safari对网站的安全要求有着诸多限制,所以最好使用Servediter应用来连接。下载后,使用self hosted server,然后这样填写:

应该就可以正常使用了。

macOS?饶了我吧,我的macOS虚拟机从开机卡到关机…… 好吧,我试了,没问题。

建议在移动设备上配合外接键盘使用,总不会有人用触摸键盘写代码吧。并且,像我刚才说的一样,有官方vscode客户端的终端,如Linux、Windows、macOS,甚至Windows 10 ARM的Lumia 950 XL,都建议使用原版vscode连服务器,code-server的真正价值在于在没有vscode支持的终端上变相使用“vscode”。

在原版vscode中的连接远程服务器选项

参考文献

  1. [code-server+VSApp] 在iPad上使用VSCode
  2. code-server/install.md at v3.8.0 · cdr/codeserver
  3. code-server/ipad.md at v3.8.0 · cdr/codeserver
  4. 在线ide code-server运行起来过程中踩到的坑及解决方法

本人才疏学浅,如有不当之处,欢迎批评指正。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
下一篇