Visual Studio Code 的安装教程和配置C语言环境插件推荐

- - 1.vscode简介
  - 2.下载安装vs code
  - 3.VSCode基础配置
  - - VSCode界面简介
    - VSCode设置中文界面
    - VSCode个性化设置
    - VSCode常用设置
    - 基本编辑快捷键
    - VSCode常用快捷键
  - 4.下载安装MinGW
  - 5.设置vscode里的环境
  - 6.插件推荐
  - 7.vscode官方文档

1.vscode简介

VSCode是微软出的一款轻量级编辑器，它本身只是一款文本编辑器而已，并不是一个集成开发环境(IDE)，几乎所有功能都是以插件扩展的形式所存在的。因此，我们想用它编程，不只是把vscode下载下来就行，还需要安装对应编程语言的扩展以及相应的编译器。

2.下载安装vs code

首先可以去官网下载VS Code

进入vscode官网：https://code.visualstudio.com/
在这里插入图片描述

点击红色圈出区域，见到下图所示选项。根据自己电脑的系统选择相应的下载项。（注：stable是稳定版本；insider是内部测试版本，可能会出问题，建议选stable）
在这里插入图片描述

下载完成后得到下图所示安装程序，双击进入安装程序
在这里插入图片描述

同意协议
选择同意协议，点击下一步
在这里插入图片描述

选择安装位置
选择安装位置，单击浏览按需选择自己要设置的安装路径位置。然后点击下一步即可

注意：为了后期的稳定性，切勿使用中文路径。
在这里插入图片描述

选择开始菜单文件夹
如需修改，请点击浏览进行设置，无需修改直接单击下一步即可
在这里插入图片描述

选择附加任务
按需选择自己需要的附加任务，这里我推荐将其他中的所有选项都勾选上，对于创建桌面方式则按需选择是否勾选，我这里因为不需要所以就不勾选了。

设置完毕最后单击下一步

注意：添加到PATH一定要勾选，很重要。
在这里插入图片描述

准备安装
确认自己前面设置的是否有误，无误则点击安装即可
在这里插入图片描述

安装完成
如果你看到如下界面，那么恭喜你，你的VSCode安装完成。
在这里插入图片描述

3.VSCode基础配置

VSCode界面简介

VS Code 采用通用的用户界面和左侧的资源管理器布局，显示您可以访问的所有文件和文件夹，右侧的编辑器显示您打开的文件的内容。

在这里插入图片描述

关于对上图界面的区域解释：

在这里插入图片描述

VSCode设置中文界面

因为我们此时安装的VSCode还是英文界面，对于英语不是那么好的小伙伴不是十分友好，所以我们此时需要安装一个插件来对VSCode进行中文化处理。

在这里插入图片描述

VSCode设置
经过如上对VSCode界面基本的了解，我们在活动栏区域找到插件安装这个选项，单击它，在搜索框中搜索Chinese 选择第一个即可，选择Install进行安装。
在这里插入图片描述

安装完毕，右下角会弹出如下提示框，单击Restart重启VSCode即可完成。
在这里插入图片描述

VSCode个性化设置

我们找到设置，选择颜色主题
在这里插入图片描述

会弹出如下框选，此时我们根据自己的喜好选择即可，如果你觉得没有，还可以选择浏览其他颜色主题进行预览选择。

在这里插入图片描述

其余文件图标主题和产品图标主题的个性化设置同理。

VSCode常用设置

打开活动栏的VSCode设置，我们在常用设置，设置字体大小，字体，是否自动保存等常用的设置项目，此处按需选择设置即可。

在这里插入图片描述

对于其他的设置也是同理，按需选择设置。

对于常用设置这一项，我的个人建议是将Files：AutoSave选项的off更改为onFocusChange选项（当编辑器失去焦点时，会自动保存具有更改的编辑器）
在这里插入图片描述

基本编辑快捷键

在这里插入图片描述

VSCode常用快捷键

为了大家更为方便的使用快捷键，我再次列了一个表格进行规整化说明。

常规快捷键
在这里插入图片描述

导航
在这里插入图片描述

4.下载安装MinGW

Windows环境下VS code是不支持C语言的调试和编译，所以我们还要下载gcc等Tools的WinGw来提供支撑。

去MinGW官网，注意不要一进去就点Download L atest Version，向下拉，找到如下所示的一个文件，点进去下载到你的电脑。
在这里插入图片描述

PS:有时候下载速度极慢
如果有小伙伴想跳过这一步也可以直接点击下面这个链接获取：

下载链接
（记得记得千万别用QQ浏览器下载，推荐使用Edge和火狐）

4、下载好之后解压，把mingw文件夹放在你电脑里，并复制mingw文件夹中bin的路径。
5、打开环境变量，按下图的步骤设置mingw的环境变量
在这里插入图片描述

6、完成之后，进入win+r，输入cmd进入控制台，输入g++，出现下图则说明mingw环境变量配置成功
在这里插入图片描述

5.设置vscode里的环境

该部分参考了这几篇文章：https://zhuanlan.zhihu.com/p/87864677
https://blog.csdn.net/weixin_44996090/article/details/104432593

(1).配置编译器(生成c_cpp_properties.json文件)
该步用于告诉vscode你的编译器在哪儿

在电脑中创建一个未来用于存放代码的文件夹(用英文命名)，随后打开vscode，点击“打开文件夹”，从而在vscode内打开该文件夹
在这里插入图片描述

按下快捷键shift+ctrl+p，展示全局命令面板，搜索找到C/C++ Edit Configurations(UI)
在这里插入图片描述

点击该条目，进入如下画面，看左侧栏目可发现程序自动在我们存代码的文件夹下建立了一个“.vscode”文件夹(这个文件夹非常重要，后续的配置都是在它内部建立文件的)，该文件夹下还有一个c_cpp_properties.json文件
在这里插入图片描述

配置“编译器路径”(写自己的编译器下载路径)以及“IntelliSense 模式”(设为：gcc-x64)
在这里插入图片描述

(2).配置构建任务(生成tasks.json文件)
该步用于告诉vscode如何构建（编译）程序

点击“文件——新建文件”，输入一段简单的测试代码(我们会发现代码明明没错却被划上了曲线，这是因为配置还没完成，暂时不用管)，随后按ctrl+s保存(一定要保存，否则无法进行后续操作)，注意要保存为.cpp格式而不是默认的.txt
在这里插入图片描述

再次按快捷键Ctrl+Shift+P调出命令面板，输入tasks，选择“Tasks:Configure Default Build Task”，再选择“C/C++: g++.exe build active file”，此时会出现一个名为tasks.json的配置文件，内容如下(关于其中各项的含义见第5点开头的文章，这里无需修改)：
在这里插入图片描述

(3).配置调试设置(生成launch.json文件)
该步用于配置调试的相关信息

回到测试代码界面，点击菜单栏的“Debug——Start Debugging”(或“运行——启动调试”)，再选择“C++(GDB/LLDB)”，再选择"g++.exe build active file"(或“g++.exe - 生成和调试活动文件”)，此时会出现一个名为launch.json的配置文件，内容如下(关于其中各项的含义见第5点开头的文章，这里无需修改)：
在这里插入图片描述