VSCode 是微软一个基于 Electron 框架开发的新一代开源代码编辑器。之前我们在讲述 C 语言的时候,都是将其定位成为一个代码编辑器来使用的。使用其内嵌的 Windows power shell 当作命令行终端来执行 MinGW 的便宜命令,这种方式虽然比较麻烦,但是其开发的过程和方法最大地逼近了 Linux 下 C 语言的开发,因此,我们在之前的 C 语言讲述过程中,选择使用了这种开发方式。但是,这种方式随着你代码的复杂度提升,如果使用 gdb 工具去做代码的调试,其实是很不方便的,因为命令行为主的操作方式永远都比不过图形化界面来的方便。

 

本文的内容,将会讲述如何使用 VSCode 来配置 MinGW 工具,以达到配置出一个可以直接编译和调试代码的 C 语言开发环境。

 

MinGW 的安装

公众号回复“GCC“即可获取 MinGW 的下载链接。

 

使用过程很简单,只需要将我们的软件包解压,放到一个特定的位置,如图 1 所示。

 


图 1 MinGW 文件夹

 

以上的文件夹里面,bin 文件夹存放了所有的 GCC 相关可执行文件,因此我们需要将其添加到环境变量里面。右击“计算机“->”属性”->”高级系统设置”,在弹出的窗口里面选择”高级“标签,再点击”环境变量“,如图 2 所示。

 

图 2 打开环境变量

 

然后点击“新建“,输入刚刚 MinGW 的路径,记住这里需要把路径定位到 bin 文件夹里面,即输入” C:\MinGW64\bin\“。如图 3 所示。然后依次点击”确定“退出。

 

图 3 添加环境变量

 

完成上述操作后,来测试一下环境变量是否添加成功。点击“开始“菜单,输入”cmd“打开”命令操作符“,输入”gcc -v“如果设置都正确,”命令操作符“会输出 gcc 的版本号,如图 4 所示。

 

图 4 gcc 安装完成

 

VSCode 安装

VSCode 文本编辑器选用的是当下最火的开源软件,微软出品的“visual studio code”,这是一个微软出品的开源跨平台文本编辑器。下载链接:

 

https://code.visualstudio.com/Download。这个编辑软件下载下来,下载界面如图 5 所示,注意下载的时候,选择“Userinstaller”,然后根据自己电脑的操作系统进行下载。下载完成之后,按照安装向导进行安装,安装路径可以自己随意指定。

 

 

图 5 Visualstudio code 下载界面

 

下载完成之后,默认在桌面上是不会出现快捷方式的,因此需要在搜索菜单里面找到“visual studio code”软件打开,如图 6 所示。软件的打开界面如图 7 所示。

 

图 6 打开 Visual studio code

 

图 7 Visualstudio code 软件界面

 

配置 VSCode

首先,我们先创建一个文件夹,用以存放我们的代码,假设我们需要创建的一个文件夹名称为“NumCal”,其位置就位于桌面上。然后我们直接使用 VSCode 来打开这个文件夹,如图 8 所示。

 

图 8 VSCode 打开文件夹

 

打开完成文件夹之后,我们就可以在里面创建 .c 文件并且编写一些代码了,假设我们在这里先创建一个“main.c”的源文件,然后编写几行很简单的代码,如,判断一个输入的数值大小,如果输入的数值在 1~100 之间就输出“Small”,如果在 101~200 之间就输出“Middle”,其余情况都输出“Large”,这个代码如图 9 所示。

 

图 9 数字判断代码

 

#include#include "a.h"int main(void) {    int number;    printf("input:\n");    scanf("%d", &number);        if((number > 1) && (number <= 100)) {        printf("Small\n");    } else if((number > 101) && (number <= 200)) {        printf("Middle\n");    } else {        printf("Large\n");    }    return 0;}



在这些操作都完成之后,我们现在先来试一下使用 VSCode 的调试功能,点击菜单栏的“运行”,然后再弹出的菜单里选择“启动调试”。如图 10 所示。

 

图 10 启动代码调试

 

此时,VSCode 会弹出一个选项,让你选择合适的调试器,这里我们选择“C++(GDB/LLDB)”,如图 11 所示。

 

图 11 调试器选择

 

本想着这一次操作可以开启我们使用 VSCode 的新世界,但是随即而来的是一桶刺骨的冷水,因为它弹出了如图 12 所示的这一个让人看不懂的界面,这个界面里的内容既像代码,又不像代码,如图 12 所示。

 

图 12 弹出的看不懂的东西

 

细心的观众会发现,这一个类似于代码的东西,它好像是被自动生成且保存至本地的“.vscode”文件夹里面的。其实如果有做前端的童鞋就知道,这个 json 文件其实是一种类似于 XML 的轻型数据文件,本广泛地用以前端和服务器之间的数据交互。但是为什么 VSCode 里面也会有这个东西呢?这是由于 VSCode 是用 Electron 框架开发的,Election 框架的核心编程语言是 Node.js,Node.js 可以简单地理解成一种可以运行在操作系统本地的,脱离浏览器环境的 JavaScript,所以就不难理解,为何 VSCode 要用 json 文件来存储数据了。

 

图 13 使用 Electron 框架,Node.js 和 Chrome V8 引擎技术开发的 VSCode

 

在了解完成 launch.json 是什么东西之后,我们就来说一下其作用。launch.json 其实顾名思义就知道,它作用是在 C 语言文件启动调试时提供配置参数。这些参数具体有什么作用呢?它们的作用参考图 14。

 

图 14 launch.json 文件配置内容注释

 

现在我们可以根据图 14 所示的注释,对 launch.json 文件中的内容进行完善。完善之后的代码如图 15 所示。

 

图 15 修改好的 launch.json

 

{    // 使用 IntelliSense 了解相关属性。    // 悬停以查看现有属性的描述。    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387    "version": "0.2.0",    "configurations": [        {            "name": "build and debug",          // 配置名称,将会在启动配置的下拉菜单中显示            "type": "cppdbg",                   // 配置类型,这里只能为 cppdbg            "request": "launch",                // 请求配置类型,可以为 launch(启动)或 attach(附加)              "program": "${fileDirname}/${fileBasenameNoExtension}.exe",                                                // 将要进行调试的程序的路径            "args": [],                         // 程序调试时传递给程序的命令行参数,一般设为空即可              "stopAtEntry": false,               // 设为 true 时程序将暂停在程序入口处,一般设置为 false             "cwd": "${fileDirname}",            // 调试程序时的工作目录,一般为${fileDirname}即代码所在目录              "environment": [],            "externalConsole": true,            // 调试时是否显示控制台窗口,一般设置为 true 显示控制台              "MIMode": "gdb",            "miDebuggerPath": "D:/software/mingw64/bin/gdb.exe",   // miDebugger 的路径,注意这里要与 MinGw 的路径对应              "preLaunchTask": "gcc",             // 这里需要添加一个参数,                                                // 调试会话开始前执行的任务,一般为编译程序,c++为 g++, c 为 gcc              "setupCommands": [                {                    "description": "为 gdb 启用整齐打印",                    "text": "-enable-pretty-printing",                    "ignoreFailures": true                }            ]        }    ]}


此时,我们编辑好这个文件之后,再选择点击菜单栏的“运行”,然后再弹出的菜单里选择“启动调试”。随之而来,一声悲怆的提示音,又给我们冰冷的内心吹了两三遍西北风。弹出的窗口如图 16 所示。

 

图 16 弹出的错误

 

图 16 弹出的窗口,伤害性虽然不大,但是极具侮辱性极高,它使用我们每个都认识的汉字,给我们提示出了这个错误,原来是没有找到任务“gcc”啊。但问题是怎么去找 gcc 呢?首先先来解释,为什么会弹出这个错误,因为我们在配置 launch.json 文件的时候,选择了调试之前要先执行 gcc 任务,那么这个 gcc 任务到底是什么,VSCode 不知道,因此提示我们需要配置。

 

在弹出的这个提示框上面,选择“配置任务”,随之而来会弹出一个选项,“使用模板创建 task.json 文件”,如图 17 所示。

 

图 17 “使用模板创建 task.json 文件”

 

遇到这种情况,我们需要毫不犹豫地点下去。点下去之后,又弹出如图 18 所示的现象。

 

图 18 MSBuild 生成“task.json”

 

此时,我们直接选择第一项“MSBuild 执行生成目标”。这时候,又弹出了一个 json 文件,这个 json 文件就是我们前面多次看到的那个“task.json”,此时我们又需要对这个文件再配置一次。配置文件的内容如图 19 所示。

 

图 19 task.json 文件

 

{    "version": "2.0.0",    "label": "C/C++: gcc.exe build active file",    "command": "gcc",    "args": [        "-g",        "${file}",        "-o",        "${fileDirname}\\${fileBasenameNoExtension}.exe"    ],
    "problemMatcher": [        "$gcc"    ],    "group": "build",    "detail": "compiler: D:\\software\\mingw64\\bin\\gcc.exe",}

 

至此为止,整个 VSCode C 语言调试已经配置完成了,接下来,我们可以返回 main.c 文件对其设置一些断点,设置完成之后,点击菜单栏的“运行”,然后再弹出的菜单里选择“启动调试”,就可以进入 C 语言调试了。如图 20 所示。

 

图 20 C 语言调试界面