0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

关于VS Code实现远程开发的配置方法详细教程

strongerHuang 来源:面包板社区 作者:strongerHuang 2021-04-27 10:15 次阅读

VS Code几乎是所有的程序员必备的工具之一,据说全球一般的开发者都使用过VS Code这款工具。

今天为大家介绍一下 VS Code 实现远程办公的方法。

概述通常,我们都是每天到工作的办公室进行办公,但是,如果下班回家,或者出差,此时如果马上需要重要的文件,或者升级一下代码,是不是必须要回到办公室才行啊?

但是,如果你电脑配置了远程办公,这种问题就迎刃而解了。

首先说下VS Code远程开发的工作原理,大致是这样的:

c2644eb2-a680-11eb-aece-12bb97331649.png

VS Code 远程开发原理

下面结合Win10、Linux云主机给大家讲讲实现远程开发的方法。

远程开发配置

1.配置SSH环境变量

我们远程开发本地 VS Code 用 SSH 协议与远程服务端通信。所以需要配置SSH环境变量,我们使用Git自带SSH客户端程序:

c271c808-a680-11eb-aece-12bb97331649.png

SSH程序

如果你还没装Git的话,建议先安装 Git,所以配置 Git 的 bin目录到环境变量的 PATH 变量下,这样VS Code连接的时候就能找到它了。

c58cd7c6-a680-11eb-aece-12bb97331649.png

环境变量

2.安装远程开发插件

要能连上远程主机,首先我们需要下载VS Code远程开发插件,VS Code其实是提供了一个远程开发插件包,包括:

c5c1b69e-a680-11eb-aece-12bb97331649.png

远程开发插件

Remote - SSH - 通过使用 SSH 链接虚拟或者实体Linux主机。

Remote - Containers – 连接 Docker 开发容器。

Remote - WSL - 连接 Windows Subsystem for Linux (Linux子系统)。

打开软件的扩展界面,搜索 Remote 开头的插件,也能看到这三个的不同远程开发插件。我们这里连接的是云主机,选择安装 Remote - SSH 插件安装即可。

3.配置远程连接

首先点左侧边栏的「远程资源管理器」之,然后再点击「设置按钮」,进入远程机器配置界面。

c5d0c7ba-a680-11eb-aece-12bb97331649.png

机器配置

修改 ssh 配置文件,用于登录远程机器,各项含义在图中有说明。

c5f71ece-a680-11eb-aece-12bb97331649.png

SSH配置文件

点击连接,登录远程服务器,需要输入几次远程服务器的密码(后面会教你怎么免密登录),输入确认即可。第一次连接会做VS Code Server的初始化工作比较慢,耐心等待。

c6083f4c-a680-11eb-aece-12bb97331649.png

登录远程服务

登录成功,即可像操作本地环境一样,在VS Code客户端操作远程云主机上的文件。注意,下图中的「打开文件夹」已经是远端机器上的目录结构了。

c61b1bbc-a680-11eb-aece-12bb97331649.png

打开远程目录

给远程VS Code 安装插件。安装的插件是在云服务器的VS Code上,对本机的VS Code没有影响,插件在远端提供功能,比如代码审查、自动补齐等等,而这所有的一切就像在本地操作一样,对文件的更改也是直接操作的云主机上的文件,丝滑连接。

c649d768-a680-11eb-aece-12bb97331649.png

本地插件和远程插件

代码编辑与远程终端调试。打开文件编辑的是云服务器的文件,同时可以打开云服务终端,直接在终端操作编译或者查看云服务器信息

c65e450e-a680-11eb-aece-12bb97331649.png

远程编辑和调试

配置SSH免密登录按照上面的配置步骤,每次连接到远程服务器,都需要输入服务器登录密码很麻烦,可以配置SSH免密登录,免去每次输入密码的烦恼,具体操作步骤如下:

打开win cmd终端,输入 ssh-keygen -t rsa 生成秘钥对

c68d0ace-a680-11eb-aece-12bb97331649.png

秘钥列表

打开生成的秘钥保存路径,拷贝 id_rsa.pub 内容,添加到到云服务器的 ~/.ssh/authorized_keys 文件后面。

尝试再次连接,不用输密码了,enjoy!

4最后

这套远程开发环境最大的好处是不用给电脑装太多软件,即使是电脑配置低点都没关系,因为所有的编辑器插件扩展和代码都在云端,通过 SSH 连接操作一个VS Code打遍所有。

而且由于远程开发插件的存在,不论我在哪里,只要有电脑都能方便的打开云端开发环境,非常的方便,这么好用的工具大幅提升生产力,所以今天来分享给大家。
编辑:lyn

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • Linux
    +关注

    关注

    87

    文章

    10988

    浏览量

    206725
  • Win10
    +关注

    关注

    1

    文章

    709

    浏览量

    39441
  • vscode
    +关注

    关注

    1

    文章

    146

    浏览量

    7371
  • 远程办公
    +关注

    关注

    0

    文章

    65

    浏览量

    6418

原文标题:手把手教你VS Code 实现远程开发的配置方法

文章出处:【微信号:strongerHuang,微信公众号:strongerHuang】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    VS CodeVS Codium之间的区别有哪些?你选哪个?

    VS Codium 是一个 VS Code 的克隆版本,百分之百免费且开源。
    的头像 发表于 02-23 15:28 395次阅读
    <b class='flag-5'>VS</b> <b class='flag-5'>Code</b>和<b class='flag-5'>VS</b> Codium之间的区别有哪些?你选哪个?

    Simplicity Studio 5扩增功能支持以VS Code开发

    应用程序开发的支持。此一功能扩展可让开发人员在VSCode生态系统中构建、刷新和调试。用户可以使用VS Code作为主要的IDE,同时仍然能够使用熟悉和喜爱的项目
    的头像 发表于 01-29 10:34 273次阅读
    Simplicity Studio 5扩增功能支持以<b class='flag-5'>VS</b> <b class='flag-5'>Code</b><b class='flag-5'>开发</b>

    如何设置VS代码配置来调试嵌入式处理器

    如果您开始使用Visual Studio CodeVS Code开发嵌入式软件,马上需要回答的一个问题是:“如何调试我的代码?”在微控制器(MCU)供应商提供的使用Eclipse的
    的头像 发表于 12-05 11:08 541次阅读
    如何设置<b class='flag-5'>VS</b>代码<b class='flag-5'>配置</b>来调试嵌入式处理器

    Code Blocks设置语言的方法

    于正确地进行语法高亮和代码格式化。本文将详细介绍Code Blocks设置语言的方法,并探讨其实际应用。 首先,要设置Code Blocks中的代码块的语言类型,需要打开
    的头像 发表于 11-26 09:49 1303次阅读

    MCUXpresso for VS Code保姆式教程免费送!

    背景 NXP 在 2023 年 7 月 31 日正式发布了 MCUXpresso for VS Code  插件,使得广大的 VS Code 用户可以在熟悉的代码编辑环境中,快速
    的头像 发表于 11-16 08:55 519次阅读
    MCUXpresso for <b class='flag-5'>VS</b> <b class='flag-5'>Code</b>保姆式教程免费送!

    在嵌入式中如何利用VS Code进行远程开发呢?

    VS Code几乎是所有的程序员必备的工具之一,据说全球一般的开发者都使用过VS Code这款工具。
    的头像 发表于 11-07 09:27 373次阅读
    在嵌入式中如何利用<b class='flag-5'>VS</b> <b class='flag-5'>Code</b>进行<b class='flag-5'>远程</b><b class='flag-5'>开发</b>呢?

    【应用笔记】基于VS Code插件实现芯海32位MCU开发调试 不回修改为release 模式,求解答

    基于VS Code插件实现芯海32位MCU开发调试 不回修改为release 模式,求解答。 目前编译后,一直是debug 模式,如何修改
    发表于 10-31 10:43

    8 个好用的VS Code Python 扩展

    今天为大家分享 8 个好用的 VS Code Python 扩展。 1. Python extension for Visual Studio Code 这个扩展是由微软官方提供的,支持但不
    的头像 发表于 10-16 11:11 304次阅读
    8 个好用的<b class='flag-5'>VS</b> <b class='flag-5'>Code</b> Python 扩展

    在Windows上使用VS Code编译RT-Thread工程的过程

    近期工作PC从Win转向了Mac,由于Mac平台还没有RT Studio IDE工具,日常开发不是太方便。在前期折腾的基础上,萌生了用VS Code+GCC在Mac上偶尔编程的想法。
    的头像 发表于 09-28 11:08 2525次阅读
    在Windows上使用<b class='flag-5'>VS</b> <b class='flag-5'>Code</b>编译RT-Thread工程的过程

    VSCode实现远程办公的方法

    VS Code几乎是所有的程序员必备的工具之一,据说全球一般的开发者都使用过VS Code这款工具。
    发表于 09-05 11:28 427次阅读
    VSCode<b class='flag-5'>实现</b><b class='flag-5'>远程</b>办公的<b class='flag-5'>方法</b>

    基于IAR for arm9.30.1在VS Code调试仿真RA

    基于IAR for arm9.30.1在VS Code调试仿真RA
    的头像 发表于 08-26 08:07 237次阅读
    基于IAR for arm9.30.1在<b class='flag-5'>VS</b> <b class='flag-5'>Code</b>调试仿真RA

    Visual Studio Code - 如何在Visual Studio CodeVS Code)中构建和调试RL78项目

    本视频演示如何在Visual Studio CodeVS Code)中构建和调试LLVM for Renesas RL78项目。 000 介绍051 构建024 调试 原文标题:Visual
    的头像 发表于 08-14 12:05 545次阅读

    通过配置telnet实现远程登陆

    通过配置telnet实现远程登陆
    的头像 发表于 08-02 10:30 715次阅读

    VS Code 1.79发布

    想在 Markdown 文档中添加图片或视频?与其浪费时间先手动将文件复制到您的工作区,然后添加指向它的链接,现在你只需将文件拖放到或粘贴到你的 Markdown 中即可。如果该文件当前不是工作区的一部分,VS Code 会自动将该文件复制到你的工作区并插入指向它的链接:
    的头像 发表于 06-11 11:46 397次阅读
    <b class='flag-5'>VS</b> <b class='flag-5'>Code</b> 1.79发布

    VS上位机开发之曲线显示

    五、结束语刚刚接触上位机的开发,单纯是为了玩一下,浅度学习,关于曲线显示的实现方法,网上的资料太杂,也很零碎,经过自己的一些摸索,终于实现
    发表于 05-08 09:48 0次下载
    <b class='flag-5'>VS</b>上位机<b class='flag-5'>开发</b>之曲线显示