vs code 远程开发_如何在浏览器中使用VS Code设置远程开发工作流

vs code 远程开发

在本指南中,我将通过DigitalOcean逐步介绍VS Code-Server的设置,以及用于创建干净,简单的工作流程的调整。

代码服务器在可通过浏览器访问的远程服务器上运行Visual Studio Code 。

我为什么需要这个?

  • 一致的环境:有了这样的设置,您就可以在具有稳定的开发环境的“ Chromebook”,平板电脑和笔记本电脑上进行编码,并拥有如家一般的感觉。
  • 多平台:您将拥有VS Code的强大功能和灵活性,可从任何浏览器(包括平板电脑)进行访问。
  • 服务器驱动:您可以利用大型云服务器来加快测试,编译,下载等速度。 通过此DigitalOcean设置,可以将服务器扩展到任意大小。
  • 电池寿命:由于所有密集型计算都在服务器上运行,因此您可以在旅途中保留电池寿命。

设置

我发现以下设置在灵活性,生产力和成本效率方面非常有用。

  1. 通过移动设备从预建图像创建Droplet。
  2. 从GitHub获取最新更新。 (启动)
  3. 在浏览器中通过Code Server提供VS Code。
  4. 做东西。
  5. 推送至GitHub。
  6. 消灭水滴。

液滴创建

对于本指南,由于其简单直观的设置过程,我选择使用DigitalOcean-但是,其他平台也可以使用。

注册

首先,如果您还没有DigitalOcean帐户,请在DigitalOcean上创建一个帐户。

创建液滴

现在是时候创建我们的Droplet(将在其中运行VS Code Server的虚拟服务器)以及您的项目了。

  • 图像: Ubuntu 18.04(默认)。
  • 套餐: $ 15 / mo,2 GB / 2 CPU(最理想)。
  • 地区:纽约(默认)。
  • 选项:(本教程不需要)。
  • 身份验证: 创建一个新的SSH密钥 , 并将其上传到仪表板 。

现在点击创建按钮!

使用SSH连接

我个人使用Termius ,但是任何SSH客户端都可以使用。 这是DigitalOcean的简洁指南 。

代码服务器安装

是时候设置代码服务器了。 转到最新版本页面,然后将链接复制到Linux的最新版本。

在控制台中执行以下命令:

# Download latestrelease from Github ( insert copied link)
wget https://github.com/cdr/code- server /releases/download/{ version }/code- server { version }-linux-x64.tar.gz

# Unpack tarball
tar -xvzf code- server { version }-linux-x64.tar.gz

# Run Code Server
cd code- server { version }-linux-x64
./code- server

从DigitalOcean控制面板中检索Droplet的公共IP地址,然后将浏览器指向http:// {PUBLIC IP ADDRESS}:8080 /。

从控制台输出中复制生成的密码,然后登录到Code-Server。

现在,您应该直接从浏览器中拥有完整的VS Code功能-这有多酷?

客制化

认证方式

默认情况下,使用随机生成的密码启用密码身份验证。 您可以将PASSWORD环境变量设置为使用自己的环境变量:

sudo nano /etc/environment

# and append the following:

PASSWORD = “Your Password”
sudo reboot

扩展名

由于无法使用官方的VS Code市场,因此Coder创建了一个管理开放源代码扩展的自定义市场 。

字型

只要您将它们安装在本地计算机上,所有字体都可以正常工作,因为浏览器可以呈现文本。 例如, FiraCode :

建筑形象

开机启动

对于设置,我添加了以下cron作业,以便在启动时从GitHub中提取最新的代码,并从一开始就可以在Code-Server中使用。

crontab -e

# And add the following (just an example): 

@reboot cd /root/AwesomeProject && git pull
@reboot /root/code-server[ $VERSION ]-linux-x86_64/code-server

拍摄快照

DigitalOcean提供了一种轻松的方法来创建完美的服务器映像,将来可以从中构建相同的Droplet。 重命名并拍摄快照。 完成后,您可以销毁当前的Droplet。

重建

在创建Droplet的过程中,单击Snapshots并选择新创建的图像。

注意:区域和基本计划设置仅限于从其创建快照的Droplet。

创建Droplet之后,您应该能够像以前一样访问Code-Server,并从上次中断的地方继续进行。

走得更远

总而言之,现在您可以通过单击一个按钮来启动和访问自己喜欢的开发设置,而无需考虑网络或计算机,而只需花费最少的费用。

就个人而言,我希望能够通过手机随时随地访问我的DigitalOcean控制面板。 尽管功能有限,但仍可以使用使用其API的非官方应用程序。 ( Android   要么   iOS 。)

通过测试Android客户端,它足以创建液滴。

可能的升级

  • 在运行Git push之后的24小时后,使用API​​会自动终止Droplet,以避免因忘记销毁正在运行的Droplet而产生成本。
  • 使用块存储进行程序和开发,以保留自上次访问以来的确切状态,在创建时动态安装到新的Droplet,以避免不断推送到GitHub。

谢谢阅读! 很高兴听到您在下面的想法和建议。

翻译自: https://hackernoon.com/how-you-can-set-up-remote-development-workflow-with-vs-code-in-your-browser-3y3q3wu9

vs code 远程开发

你可能感兴趣的:(java,python,docker,大数据,git)