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

[TOC]

1.下载vscode

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

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

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

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

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

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,那么需要填写的便是

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,输入下面这个语句

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;
1
chmod 700 ~/.ssh
  • 设置authorized_keys文件权限
1
chmod 600 ~/.ssh/authorized_keys

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

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

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

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

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

1
vim /etc/ssh/sshd_config 

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

image-20220809194558264

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

1
systemctl restart sshd.service 

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

1
reboot

5.3 修改本机ssh config文件

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

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

1
2
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_linux

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

image-20220809193953712

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

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,还请在下面评论说一声哦!

万分感谢!