VSCode - 实现远程开发教程(远程编辑服务器文件,远程执行命令)
作者:hangge | 2024-06-06 08:36
有时因为本地机器的配置原因,或者一些项目(如大数据、人工智能)的特殊需求要求我们要进行远程云端开发。Visual Studio Code(VSCode)远程开发插件使得在服务器上进行开发变得轻松而高效。本教程介绍如何在 VSCode 中设置远程开发环境,实现远程编辑服务器文件和执行命令的功能。
1,安装插件
(1)打开 VSCode 的插件商店,直接搜索 ssh,即可找到 Remote - SSH,点击安装。
![](http://hangge.com/blog_uploads/202401/2024013109112915384.png)
(2)安装后点击菜单的:首选项(Preferences)->设置(Settings)->扩展(Extension)-> Remote-SSH,勾选“始终显示SSH登录终端”
![](http://hangge.com/blog_uploads/202401/2024013109194225916.png)
2,配置服务器信息
(1)打开 Remote-SSH 插件面板,依照如下步骤打开 config 配置文件:
![](http://hangge.com/blog_uploads/202401/2024013109141356790.png)
(2)在 config 文件中填写远程主机的连接信息(Host 主机名称可以随便写)
![](http://hangge.com/blog_uploads/202401/202401310916324226.png)
3,连接服务器
(1)点击 Remote-SSH 插件面板刷新按钮后,即可看到我们刚刚配置的服务器节点。我们点击该节点旁边按钮即可连接该服务器(左侧按钮为直接使用该窗口,右侧为打开一个新窗口)
![](http://hangge.com/blog_uploads/202401/2024013109220637814.png)
(2)中途会要求我们输入密码,连接成功后,就可在左侧打开服务器上的文件夹。
![](http://hangge.com/blog_uploads/202401/2024013114130476688.png)
4,使用测试
(1)比如我这里选择打开服务器上 /root/vue_deom 这个 Vue 项目文件夹,这是左侧就会加载该文件夹的目录结果,我们可以编辑本地文件一样进行代码编辑。
![](http://hangge.com/blog_uploads/202401/2024013114171153772.png)
(2)编辑器下方的终端命令也是直接在服务器上执行的,比如我这里执行启动 Vue 项目命令:
![](http://hangge.com/blog_uploads/202401/2024013114195182380.png)
(3)启动成功后使用浏览器访问这个远程服务的地址,可以看到页面如下。说明整个远程开发过程已经成功。
![](http://hangge.com/blog_uploads/202401/2024013114211393145.png)
全部评论(0)