距离上次更新本文已经过去了 347 天,文章部分内容可能已经过时,请注意甄别

本篇博客教你如何用 VScode 的 remote ssh 插件连接上 linux 云服务器进行代码开发~

[TOC]

1. 下载 vscode

vscode 是微软官方的一款多语言代码编辑器,其因为丰富而强大的插件而被非常多用户选中使用!

官网下载:https://code.visualstudio.com/

在这里可以直接下载 windows 上的 VSC,但是默认的下载链接下载是非常慢的!

plaintext
1
https://az764295.vo.msecnd.net/stable/da76f93349a72022ca4670c1b84860304616aaa2/VSCodeUserSetup-x64-1.70.0.exe

我们要做的就是把这个默认的下载链接改成国内的镜像源,下载速度就可以起飞!

plaintext
1
2
3
将下载地址中的az764295.vo.msecnd.net 更换为 vscode.cdn.azure.cn 
更改后:
https://vscode.cdn.azure.cn/stable/da76f93349a72022ca4670c1b84860304616aaa2/VSCodeUserSetup-x64-1.70.0.exe

这速度岂不爽炸了!

image-20220809184116183

1.1 安装一些插件

image-20220809184637764

在开始之前,我们需要安装一些必要的插件:

  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  • Remote - SSH

image-20220809184507070

如果你没有其他的开发需求的话,默认安装这两个就可以让我们愉快地登陆上 linux 服务器了!

1.2 连接云服务器

安装完 remote ssh 之后,你的左侧应该会出现这样一个按钮

image-20220809184655471

在最上面的链接模式我们选择 ssh targets,在这里可以点击 + 号添加 linux 服务器

image-20220809184749068

这里填写的格式为 shh 用户名@公网ip。比如我的用户名是 user,公网 ip 是 114.514.20.22,那么需要填写的便是

plaintext
1
ssh user@114.514.20.22

image-20220809184800200

输入完后会让我们选择一个路径,我们选第一个就可以了,方便日后管理

image-20220809185426901

这时候右下角会弹窗告诉你 host add,成功添加了一个远程终端

打开 user 路径下的.ssh/config 文件,可以看到下面关于 host 的信息。其中我们可以把 Host 改成和 user同名,注意不要修改 hostname 哦!

image-20220809205708750

重启 vsc,然后你应该就可以在左侧看到刚刚添加的 linux 云服务器。我们右键这个终端,会出现一个选项卡询问你是在当前 vsc 界面打开该终端,还是新建一个 vsc 界面。这个根据自己喜好选一个就 OK!

image-20220809185832232

初次链接会让你选择该终端的平台,我们选择 linux 即可!

image-20220809190011790

注意:这里我发现直接链接 root 会出现错误,可能是安全性考虑阻止了 vscode 在远程服务器的环境安装,后文改为我自己的子账户进行演示!

1.3 关于修改 host

现在发现了问题,其实是因为 host 需要修改成和 user 一样才能正常访问,否则会报错

image-20220809210228368

同时下面 ssh 显示的是 host 名字,而不是公网 ip

image-20220809210247852

这里我改成自己的子账户进行演示!

输入咱们账户的密码

image-20220809190253234

这里 vscode 会在你的云服务器上装一些环境,当左下角出现你的公网 ip(这里显示的是 host,为公网 ip 是因为我没有改)那就代表链接成功了!

image-20220809190653558

到这里我们就已成功连上云服务器了!


2. 常用插件推荐

vscode 连接的好处就是我们可以直接在云服务器环境里面安装插件!这里给大家推荐几个非常棒的插件:

  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  • Terminal Here(超级好用,必装!!
  • C/C++
  • C/C++ Extension Pack

如果你还学习 python,可以安装下面的插件:

  • Python
  • Pylance
  • Pip Manager

安装这些插件的时候,会有一些附属插件被同时安装,我们不需要管它,交给 vsc 自己处理就行拉!注意安装的时候一定是选择安装在你的云服务器里面,如果安装在本地,对于云服务器来说是没有用的哦~

image-20220809191117252

3. 开启终端

Linux 最常用的当然还是终端了,我们使用快捷键 ctrl+shift+p 打开 vsc 的命令选择界面,搜索终端,选择下面这个视图:切换终端

image-20220809191212606

可以看到下面会出现一个熟悉的界面~linux 的命令行有啦!

image-20220809191312411

但是,如果只用 linux 的命令行可完全没必要折腾 vscode,这里介绍如何更方便的用 vsc 开发

4. 打开文件夹

在左侧最上面的分区中,我们可以选择打开一个文件夹

image-20220809191423211

这时候,你便可以选择你常用的工作文件夹,比如我的代码都在 GIT 文件夹里面,选择后 vscode 会打开它

image-20220809191438968

这里 vscode 会让你在输入一次 linux 用户的密码,后文会提到如何免密登录

现在我已经打开了 GIT 文件夹,可以看到里面的几个子文件夹,这里创建一个新的 test 文件夹来作为演示

image-20220809191613835

vscode 非常棒的一点是,他会帮你保存上一次打开本文件夹的命令行操作信息,不像 Xshell 打开一个新的之前的命令行操作就看不到了😂

image-20220809191749689

咱们直接右键创建一个新的 test 文件夹,在里面创建一个 test.c 文件

image-20220809191702376

随便写一个喜闻乐见的 hello 代码,vscode 的代码补全比 vim 的插件好了不知道多少(个人感受)

image-20220809191935333

这时候之前安装的几个插件就派上用场了!C/C++ 插件会为我们的代码提供高亮

4.1 Terminal Here 插件

Terminal Here 这位更是重量级,我们可以方便的直接打开当前目录下的命令行,不需要自己 cd 进入文件夹!

还是用 ctrl+shift+p 打开 vsc 的命令面板,搜索 terminal,找到下面这个选项

image-20220809192100368

直接回车选择它,你会发现,它自动帮我们创建了一个 test.c 所处文件夹下的终端!当你的文件目录层级很多的时候,这能帮上大忙!

image-20220809192243623

这里用 gcc 编译一下,没啥好说的,非常尝龟的操作

image-20220809192326540

这里你能看到 vscode 的另外一个好处,他会给你把运行正常的命令标蓝,而运行不正常的则标红。

比如我们在代码里面写个 bug 在尝试编译,可以看到前面的小点变红了!

image-20220809192517321

同时在右边的滚动条上也能清楚地看到那个地方的命令是运行失败标红的!

image-20220809192540902

Terminal Here 插件牛逼的地方还不止这个,如果你的代码是在 Python-vnev 的虚拟环境工作目录下,该插件还会自动帮你打开虚拟环境!省得我们自己敲这一行代码了

如果你不知道 vnev 虚拟环境是啥,简单说一下:python 有很多第三方软件包,我们可以通过 pip 下载安装。为了避免不同的项目中的包都直接安装在用户目录下造成环境污染,便可以创建一个 vnev 虚拟环境,在这个虚拟环境下安装包。

只有在虚拟环境开启,且在它的工作目录下,才可以访问到这个包!

image-20220809192828239


咳咳,扯远啦!有了上面的引导,想必你已经可以愉快的用 vscode 在 linux 环境上开发了。

下面介绍一下如何通过 ssh 密钥来免密登录,不需要每一次都输入密码

5. ssh 免密登录

参考 https://blog.csdn.net/weixin_42907822/article/details/125237307

如果你之前配置过 gitee/github 的 ssh 连接,那么肯定对下面的步骤有些熟悉


5.1 生成 ssh 密钥

我们打开 windows 的 cmd,输入下面这个语句

plaintext
1
ssh-keygen -t rsa -b 4096

出现的提示信息全部回车跳过,不进行任何操作!

第一行是让你填一个文件名,可以根据自己需要填写,也可以不填直接回车跳过(如果回车跳过,默认就是在 C:/用户/用户名/.ssh 文件夹中生成密钥文件)

随后系统会创建一个 rsa 公钥和密钥,我们将其复制到 C:/用户/用户名/.ssh 文件夹中,也就是最初配置 vscode 的 ssh 那个文件夹

image-20220809193600976

随后我们用 Xshell 里面的 xtfp 连接到云服务器,将有.pub 后缀的文件拷贝到云服务器用户目录下的.ssh 文件夹,并将其改名为 authorized_keys。注意名字不要改错了。

image-20220809193815725

也可以将 pub 文件中的内容拷贝之后,vim 写入到这个文件里面去。

  • 设置文件目录~/.ssh 权限为 700;
python
1
chmod 700 ~/.ssh
  • 设置 authorized_keys 文件权限
python
1
chmod 600 ~/.ssh/authorized_keys

修改完后可以用 ll 命令看看权限是否正常修改成功,700 对应的是 dxrw-------,600 对应的是 -rw--------

还要注意当前这几个文件的所属用户是谁,必须要是当前用户,才能正常 ssh 连接!否则会提示无权限!(有的时候 ftp 传上去的文件是 root 用户的,需要改成当前用户的权限才能被正常使用。)

5.2 修改 root 下的配置文件(慎重)

友情提示:当你修改任何 linux 环境下的文件之前,都要记得 cp 一份出来作为备份!

进入你云服务器的 root用户下,修改下面的文件

plaintext
1
vim /etc/ssh/sshd_config 

PubkeyAuthentication 前的 # 号去掉,这样公钥验证才生效。

image-20220809194558264

修改后保存退出文件,然后用下面的语句重启 ssh 服务。

bash
1
systemctl restart sshd.service 

如果无效,则尝试直接重启云服务器。

plaintext
1
reboot

5.3 修改本机 ssh config 文件

随后我们再次打开本机 (就你现在用的 windows 电脑)C:/用户/用户名/.ssh 路径下的 config 文件,注意是本机不是云服务器!

在原本的配置信息后面追加下面两个,其中 IdentityFile 指代的是你刚刚生成的那个密钥的文件名,请根据你的实际文件名进行填写!

plaintext
1
2
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_linux

如果你的主机 ssh 端口端口不是 22,这里还可以继续添加一个 Port 选项选项来设置 ssh 的端口。

image-20220809193953712

最终的单个 ssh 配置项应该如下所示

plaintext
1
2
3
4
5
Host 公网IP
HostName 公网IP
User 用户名
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_linux

前面创建 sshkey 的时候,第一个对话框是让你填写一个名字(如果跳过则会采用默认名字 id_rsa)。在 ssh 多终端配置的时候,名字可以方便我们管理不同的 ssh 密钥。

如下是我的配置,Linux 服务器和 gitee/github 用的是不同的 ssh 密钥,这样能避免单个密钥泄露的时候直接被爆破所有服务。

image-20220809194225523

这里配置好之后,你应该就可以免密登录云服务器而不需要输入密码了!

image-20220809194803775

这一步可能会出现很多问题,这里建议大家查更多资料作为补充。不要在评论问我,因为我大概率也不会😥当初配置的时候也折腾了一会,也不知道自己是怎么搞定的(真的不知道)

第一次配置好 ssh 后可能会连不上,需要重启 vscode 再试试!

结语

不知道这篇博客有没有帮到你呢?

如果你根据本教程成功配置好了 vscode,还请在下面评论说一声哦!

万分感谢!