ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

VS Code 移动端:手机、平板远程写代码,三步跑通

VS Code 移动端:手机、平板远程写代码,三步跑通 VS Code 移动端手机、平板远程写代码三步跑通【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscodeVisual Studio CodeVS Code是那个装在各台电脑上的轻量级代码编辑器它其实也能跑在你的手机或平板上。先说个高频场景晚上八点值班群弹出一条消息——某个配置解析的小 bug 影响了十几个用户修复只要改三行可人已经在地铁上电脑还在家。与其到家再说不如现在就把 VS Code 移动端安排上。它不是一个难以寻觅的 App而是把这台编辑器接到手机上来的三种方式本文只展开最推荐的一条远程开发三步跑通。三条路对号入座选接入方式移动编码环境搭建一共三条路区别只在一件事算力花在哪。挑一行走对应路线你更看重什么选哪条路一句话理由功能完整、项目重、要跑命令远程开发算力、插件、终端都在服务器手机只是屏幕和键盘通勤路上离线用本地应用code-server 封装装在设备上自己跑不依赖网络但受设备性能限制偶尔看看代码、轻量编辑PWA网页版加到主屏零安装成本离线能力弱适合瞄一眼三条路跑的都是同一套网页版 VS Code差别只是它运行在哪台机器上。下面只把远程开发这条路走通。远程开发主线三步跑通先看懂连接原理一张图说清手机浏览器访问的是本机地址SSH 隧道把它转到服务器的本地端口code-serverVS Code 的网页版在那儿等着。这就是手机 VS Code 远程开发的全貌不装任何客户端浏览器就是客户端。第一步服务器上装好 code-servercode-server 的作用是把完整编辑器搬进浏览器。在服务器上一条命令装好curl -fsSL https://code-server.dev/install.sh | sh它默认只监听服务器本地的 8080 端口首次启动会帮你设置一个访问密码这个密码就是手机登录时的凭据。第二步手机上开一条 SSH 隧道SSH 是标准的远程登录协议。让手机的 SSH 客户端把服务器的本地 8080接到手机的本地 8080这样 8080 全程不暴露到公网ssh your-userserver-ip -L 8080:127.0.0.1:8080iOS 可以用 Termius、Blink 这类客户端Android 可以直接在 Termux 里跑这条命令。这条命令要一直活着断了重跑一次即可。第三步浏览器打开开始写访问http://localhost:8080输入密码看到的就是和桌面版几乎一样的编辑器把项目仓库克隆进服务器的工作区改完那三行再在底部分屏开个终端跑测试一轮完整的远程开发就跑完了git clone https://gitcode.com/GitHub_Trending/vscode6/vscode另外两条路一句话带过本地应用是把同一个网页版装进 App离线可用、速度看设备PWA 只是把网页版加到主屏最轻、也最弱。跑通上面这条主线后它们只是换了个入口。手感手势对照、布局与三个够用的插件手势对照速查表不管你在平板横屏写代码还是手机竖屏看代码触摸手势都是同一套浏览器标准手势记住对照就够手机端手势桌面等效操作点按鼠标单击双击双击选中单词双指水平拖动拖拽选择长按右键弹上下文菜单双指捏合/张开缩放页面三指上/下滑动上/下一页布局只要改三处字号调大手机上第一眼疲劳最影响效率editor.fontSize给到 18。关掉小地图和状态栏屏幕上的每个像素都该留给代码。横屏时终端分屏到侧边左边写、右边跑命令不用来回切视图。写进设置就三行{ editor.fontSize: 18, editor.minimap.enabled: false, workbench.statusBar.visible: false }插件挑三个就够Remote - SSH项目跨多台机器时从服务器再连下一台Code Spell Checker变量名打错编译器不报错拼写检查会Prettier格式化一步到位不用手搓缩进。排障速查连不上、卡、字小怎么办问题常见原因一句解法浏览器连不上一直转圈SSH 隧道没开或已断开重跑带-L 8080的那条命令保持隧道在线打字卡顿、页面迟滞网络抖动或服务器开了太多标签页关掉不用的文件和扩展优先有线或 5G虚拟键盘挡住代码竖屏高度不够终端挤在底部横屏操作或外接蓝牙键盘屏幕小、看着累默认字号偏小editor.fontSize调到 18–20再整体放大一档页面放一会儿就掉线系统回收空闲的 SSH 连接在 SSH 客户端里开启保活ServerAliveInterval 30今晚就能做的一件事找一台你够得着的服务器云厂商的试用实例就行跑一遍第一步的安装命令手机上开一条隧道浏览器打开http://localhost:8080——编辑器一出现你的移动编码环境就算建成了。明天地铁上那个三行代码的 bug 就能顺手修完。继续往深处看的话项目里有三个地方值得翻根目录的CONTRIBUTING.md这台编辑器本身是怎么构建和发布的cli/目录用 Rust 写的 VS Code 命令行工具也就是code命令背后的实现product.json编辑器版本与更新信息的配置所在。如果这条主线帮你省过一次对着手机干瞪眼的晚上欢迎留言聊聊你的移动编码场景或者先收藏这篇——下次值班群消息一响你就知道第一步敲哪条命令了。【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscode创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表