1) 使用背景

  1. 使用Linux默认vim编辑器时,代码显示不美观,没有自动补全
  2. 复制粘贴操作限制不方便,对于需要从其他地方转移过来调试的代码需要依赖第三方ssh软件,例:Xshell等

2) 软件介绍

此时推荐一款跨平台开源编辑器软件:Visual Studio Code(简称“VS Code”)

Visual Studio Code是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OSX、Windows和 Linux 之上的,针对于编写现代Web和云应用的跨平台源代码编辑器,可在桌面上运行,并且可用于Windows,macOS和Linux。它具有对JavaScript,TypeScript和Node.js的内置支持,并具有丰富的其他语言(例如C++,C#,Java,Python,PHP,Go)和运行时(例如.NET和Unity)扩展的生态系统。

2.1) 主要功能

  • 语法高亮(syntax high lighting)
  • 可定制的热键绑定(customizable keyboard bindings)
  • 括号匹配(bracket matching)
  • 代码片段收集(snippets)
  • 丰富的快捷键

2.2) 语言支持

截止2019年9月,已经支持了如下37种语言或文件:F#、HandleBars、Markdown、Python、Java、PHP、Haxe、Ruby、Sass、Rust、PowerShell、Groovy、R、Makefile、HTML、JSON、TypeScript、Batch、Visual Basic、Swift、Less、SQL、XML、Lua、Go、C++、Ini、Razor、Clojure、C#、Objective-C、CSS、JavaScript、Perl、Coffee Script、Dockerfile、Dart。

3) 软件安装及相关插件准备

官网下载链接:<https://code.visualstudio.com/Download>;

3.1)下载安装vscode软件

3.1.1 使用Windows系统,按照图示点击下载安装程序进行安装即可

image.png

3.1.2 执行安装程序(运行exe程序)

image.png

3.1.3 开始安装前的设置,同意协议点击下一步

image.png

3.1.4 选择安装位置(不改动直接下一步)

image.png

3.1.5 直接下一步

image.png

3.1.6 勾选创建桌面快捷方式,下一步

image.png

3.1.7 开始软件安装,等待软件安装

image.png

3.1.8 软件安装完毕!

image.png

3.2)配置vscode软件语言为中文

3.2.1 进入扩展中心(快捷键ctrl+shift+X)

image.png

3.2.2 搜索chinese,安装语言包插件

image.png

3.2.3 安装完成,重启软件使其生效

image.png

3.2.4 设置中文完毕!

image.png

3.3)安装可以SSH到远程主机的Remote-SSH插件

3.3.1 进入扩展中心,搜索Remote-SSH

image.png

3.3.2 安装Remote-SSH插件

image.png

3.3.3 插件安装完毕,左侧栏出现远程资源管理器入口

image.png

3.4)Vscode开启登陆终端(使用SSH插件远程时开启使用Linux主机的Bash功能)

3.4.1 文件->首选项->设置->Show Login Terminal 打上勾

image.png

3.4.1 搜索Show Login Terminal,勾选开启该功能

image.png

3.5) vscode使用Remote-SSH插件连接远程主机

3.5.1 点击+号添加创建SSH配置

image.png

3.5.2 填写远程目标主机账号名和IP地址(能解析到正确IP的域名也可)后,按Enter回车键

image.png

3.5.3 选择将SSH配置信息保存到当前用户配置下,也可选择全局配置(第二个选项)

image.png

3.5.4 开始SSH访问远程主机

image.png

3.5.5 选择目标主机类型>Linux

image.png

3.5.6 下方终端窗口输入yes回车下一步

image.png

3.5.7 输入远程主机密码按Enter回车下一步

image.png

3.5.8 SSH访问成功!

image.png

3.6)直接在Vscode上使用bash运行命令

3.6.1 开启远程主机bash

image.png

3.6.2 运行命令

image.png

3.7)使用远程资源文件管理器

点击左侧栏的资源管理器(前提需SSH到远程主机上)

image.png

3.7.2 点击进入打开文件夹

image.png

3.7.3 选择要进入的远程目录,按确定

image.png

3.7.4 在新弹出的窗口输入远程主机密码,按Enter回车

image.png

3.7.5 勾选信任选项,点击是

image.png

3.7.6 左侧出现远程主机文件目录(管理远程文件资料成功!)

image.png


4.0) 使用Vscode调用shell脚本案例分享

4.1 切换到bash,使用命令创建net.sh文件

image.png

4.2 左栏点击文件编辑内容,直接粘贴远程代码(记得保存)

image.png

4.3 bash赋予执行权限,运行脚本

image.png

4.4 执行完毕(完结撒花!!!)

image.png


参考Url:
<https://baike.baidu.com/item/visual%20studio%20code/17514281>;.
<https://blog.csdn.net/qq_42669026/article/details/104056358>;