VSCode介绍、常用插件使用以及java、C++、python环境配置

朱雀 2021-05-12 11:50 565阅读 0赞

在 Build 2015 大会上，微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外，最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了！  
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作......

VSCode属于轻便型代码编辑器，可以安装一些插件来扩展它的功能，不像一些集成的大型IDE集成了很多功能，安装、使用起来比较麻烦。

### 一、常用配置： ###

**1、通用功能的配置：**

**1.1）左侧视图中树组件的缩紧：**

默认左侧树缩紧太小，当打开大的工程，层级比较多时看的会比较累人，可以通过【设置】(左下角的齿轮)来调整。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

**1.2） 文件自动定位到左侧树：**

当我们在工作区不断的切换文件时，默认左侧树会自动定位获取焦点、同时左侧树滚动条也会自动定位。这个体验不是很好，会不断的干扰我们在左侧树种找代码文件。可以通过设置>"reveal"进行设置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1][]

这支撑focusNoScroll即可。

**1.3）文件自动保存：**

![20200715202854766.png][]

**1.4） 查看安装了哪些插件：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2][]

**1.5）根据文件名搜索文件：**

ctrl+p 打开文件搜索框，然后输入名字即可搜（不区分大小写）

![20200721102722372.png][]

**1.6）命令搜索框：**

ctrl+shift+p 打开命令搜索框（前面有一个>），可以查看、搜索所有命令。例如：输入>help:user interface overview ，得到如下界面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 3][]

**1.7）tab键转成空格设置：**

在写python等代码的时候，特别需要注意缩进的设置，由于不同编辑器对tab键的大小由不同设置，所以为了在不同编辑器（例如：vim、notepad++）中打开文件后格式保持一致，一般是使用空格，而不是tab键。

1）在vscode中可以设置tab的大小，【设置】输入“tab”后可以调整，一般设置为4个空格。

2）可以通过替换，对一个文件中tab统一换成空格，从而方便在不同编辑器中打卡后格式一致：

![20200830175000787.png][]

3）在vscode中编辑文件时，还可以设置该文件中tab键自动换成4个空格：

ctrl+shift+p 打开命令搜索框，输入indent，即可：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 4][]

**2、 git使用：**

vscode默认集成了git功能。启动vscode是会检查系统是否安装了git，如果没有安装会提示。可以通过这里[https://git-scm.com/][https_git-scm.com]下载安装对应的git，在windows上直接下载二进制文件，卸载旧版本，解压新版本即可。（注：vscode要求git在2.X以上版本，否则有些功能无法使用）

**2.1）git add、commit、push、pull基本功能使用**：

我们在本地通过git clone下载好代码，进入目录，使用vscode ./打开vscode编辑器后，会自动识别git信息，在左侧有一个git图标按钮，点击后在这里可以完成git相关的命令。

1）add、commit、push、pull操作：

在vscode中修改完代码后，左侧git图标出现了一个数字，表示有多少个文件被修改，点击git图表进入后，在“更改”一栏中可以看到被修改的文件，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 5][]

*  文件名旁边有个**+ M**，代表修改了但是没有add、commit，可以点击+ 执行git add 操作
 *  文件名旁边有**- M**，表示add了但是没有commit
 *  文件名旁边没有M ，表示commit 了。

执行add操作后的文件会放到“暂存的修改”一栏，在上方输入框中输入提交信息后，点击最上方的对勾按钮，执行commit命令，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 6][]

以上，相当于执行了git add \* 和 git commit -m "..."  两个命令，接下来我们将修改提交到远程服务器：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 7][]

相当于git push 或者 git push origin dev\_01

**2.2）查看历史：**

推荐安装Git history 和Gitlens 这两个插件。安装完成后，打开文件，然后在右上方出现若干个小图标：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 8][]

在git log（git history）界面可以查看每次提交内容，点击某次提交记录，vscode会在上发提示使用哪种命令查看：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 9][]

其次，我们可以在vscode的左下角，查看当前工程所在git 分支。

**3、连接远程linux服务器：**

安装Remote-SSH插件，该插件是微软亲自操刀编写。在应用商店中搜索：remote ssh。

![20200626093801136.png][]

安装后在左侧出现远程连接的图标，点进去如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 10][]

在 Select SSH configuration file to edit 中，选择第一项即可，开始对里面的内容进行编辑：

![20200626094723560.png][]

选择后，会显示C:\\users/XXX\\ .ssh文件夹下的config文件中的内容，需要将其修改为所需要的内容（若 SSH 端口不是默认的 22，则还需加一行 Port）。

VSCode 的这个远程连接的插件是基于 OpenSSH 的，因此在本机需要装有 OpenSSH 的客户端，在服务器上也要装有 OpenSSH 的服务端，并且密钥文件已经放置在服务器中，即需要在 `cmd` 中可以直接通过命令 `ssh IP_ADDRESS -l USERNAME -p PORT` （其中 IP\_ADDRESS、USERNAME、PORT 要修改为所需变量）连接的情况下，才可以通过这个插件连接到服务器。如果前面的这些配置还没有完成，VSCode 会报出以下错误：

![20200626095058188.png][]

1）安装openssh：

各个平台下 OpenSSH 客户端的安装参考 VSCode 官方文档《[Installing a supported SSH client][]》一节的内容。这里以 windows 7 为例，官方推荐：Install [Git for Windows][] and select the **Use Git and optional Unix tools from the Command Prompt** option or manually add `C:\Program Files\Git\usr\bin` into your PATH.

首先，安装 [Git for Windows][]，安装过程中注意勾选 "**Use Git and optional Unix tools from the Command Prompt**"。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 11][]  
安装完git后，在Git/bin下面有三个可执行文件bash.exe、git.ext、sh.exe，且会自动添加到环境变量中。接下来，我们在windows的cmd中使用ssh连接远程：

![20200626101514372.png][]  
在输入centos的用户名（root）、密码后就登录到了远程centos。但是有个问题，以后每次连接到远程都需要输入密码，很麻烦。所以，接下来我们配置ssh KEY来远程连接centos。

2）配置ssh KEY：

首先生成SSH KEY，执行如下命令，一路回车：

ssh-keygen -t rsa

执行完，在C:\\Users\\liuxiao\\.ssh下会有：id\_rsa（私钥）、id\_rsa.pub（公钥）、known\_hosts，还有上面的config文件。

接下来，将公钥保存到远程centos的~/.ssh/authorized\_keys 文件中。这样，再次在cmd中ssh连接centos就无需密码了。

![20200626102352188.png][]

3）通过vscode连接远程centos：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 12][]

在弹出来的窗口中，选择linux

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 13][]

如果远程linux是centos6，会报如下错误：

![20200626140043483.png][]

根据vscode提示（[https://code.visualstudio.com/docs/remote/linux\#\_remote-host-container-wsl-linux-prerequisites][https_code.visualstudio.com_docs_remote_linux_remote-host-container-wsl-linux-prerequisites]）得知vscode要求远程远程linux可以是centos7，或者centos6（`glibc` >= 2.17, `libstdc++` >= 3.4.18）

当升级远程linux系统后，重复上述操作，就可以正常链接到远程，这时就可以通过vscode在远程linux上创建项目，或者通过中断，在远程linux上执行shell命令了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 14][]

参考：[https://www.jianshu.com/p/d7c9cef525bc][https_www.jianshu.com_p_d7c9cef525bc]

**4、code server：**

除了使用ssh插件，来完成远程开发，我们还以是有一款更加强大的工具code server。详情见：[https://mp.csdn.net/console/editor/html/106940400][https_mp.csdn.net_console_editor_html_106940400]，

**5、中文插件：**

在vscode的商店，搜索Chinese，点击安装即可。

![20200626093513922.png][]

### 二、web开发配置： ###

在vscode之前，开发前端时用的最多的就是webstorm这个大型IDE了，和其他IDE一样，webstorm集成了很多功能。

### 三、java开发配置： ###

待完成

### 四、C++开发配置： ###

待完成

### 五、python开发配置： ###

待完成

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20210511/501b536c78f345f2887a963d3e94d248.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1]: /images/20210511/c55697d6d6e544ad95df2db3d5ad6240.png
[20200715202854766.png]: /images/20210511/48cebd1183564dea83e1c4981c7127f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2]: /images/20210511/adcb0ba7896146e0a54b74726b4af59a.png
[20200721102722372.png]: /images/20210511/9891976205134b00ac5768c9232ca221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 3]: /images/20210511/c470c45247a842c69c6acddb52e1702c.png
[20200830175000787.png]: /images/20210511/dc74846ee9f64f2eae6a9a75eada83f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 4]: /images/20210511/b7d177a0fed04a20a255749f04a359ac.png
[https_git-scm.com]: https://git-scm.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 5]: /images/20210511/b31cd7e08f764ca8894f0a27d049ac3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 6]: /images/20210511/77da2bca23a5477990bef43b6b1a7d88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 7]: /images/20210511/815abb979cab4311a00a28b3c0a5729e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 8]: /images/20210511/a6077ca95c764a2f8848f5189bf2c9b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 9]: /images/20210511/6ae02b138a024d0a97f0b9846c916349.png
[20200626093801136.png]: /images/20210511/ab334af8a99545d686a8ea456eb3b1a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 10]: /images/20210511/633342f6a3f543f39b5958f77ddeb2ce.png
[20200626094723560.png]: /images/20210511/ec6180040d204c699a06fe2fa1a251f2.png
[20200626095058188.png]: /images/20210511/eaee2afc2e5c40429a867e0b07bd7170.png
[Installing a supported SSH client]: https://links.jianshu.com/go?to=https%3A%2F%2Fcode.visualstudio.com%2Fdocs%2Fremote%2Ftroubleshooting%23_installing-a-supported-ssh-client
[Git for Windows]: https://links.jianshu.com/go?to=https%3A%2F%2Fgit-scm.com%2Fdownload%2Fwin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 11]: /images/20210511/a1daaa0f2fd14e16a82161a9825a1a63.png
[20200626101514372.png]: /images/20210511/d41ff20e74144b15b292a760ee1d1c83.png
[20200626102352188.png]: /images/20210511/5e75cc9f3665429688d0746d6ec9189f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 12]: /images/20210511/d508049b0f7e41bca4cf220b0bcd1b29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 13]: /images/20210511/be085c3a9c0548e5a30955605952407c.png
[20200626140043483.png]: /images/20210511/48c5e1a1e6874d89855a212f7a0ee347.png
[https_code.visualstudio.com_docs_remote_linux_remote-host-container-wsl-linux-prerequisites]: https://code.visualstudio.com/docs/remote/linux#_remote-host-container-wsl-linux-prerequisites
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 14]: /images/20210511/22b748857e554b65b4724251b92721bf.png
[https_www.jianshu.com_p_d7c9cef525bc]: https://www.jianshu.com/p/d7c9cef525bc
[https_mp.csdn.net_console_editor_html_106940400]: https://mp.csdn.net/console/editor/html/106940400
[20200626093513922.png]: /images/20210511/6b44169dd4644374adcc87b3f96fac98.png