VSCode 配置

  3 分钟阅读  

VSCode 配置

VSCode 是一款轻量级的代码编辑器，可以通过安装各种各样不同扩展的方式来实现开发者所需要的功能。

本文我们介绍 VSCode 的基本配置，重点在于介绍一些未来可能会用到的扩展插件。按照本文的流程完成后，你应该等效地完成了足以应对《面向对象程序设计基础》课程中的代码的集成开发环境的配置。此外，我们还会介绍一些基本的调试方法，而这恰恰是 VSCode 比 Dev-C++ 在现阶段不知道高到哪里去的地方。

事实上，在未来，我们可以用 VSCode 配置 Python 开发环境，配置软件工程课程中所需要的框架的开发环境，而这些都是通过“扩展”（Extension）来实现的。

前置知识

  • 了解一个 C++ 程序从源代码到可执行程序中发生了编译、链接这两步操作（《程序设计基础》大作业中会有此部分的讲解）
  • 动手能力

下载与运行

  • 打开 VSCode 官网：https://code.visualstudio.com/
  • 点击大大的 Download 按钮（如果是 Windows 64 位用户可以点击下拉框选择 x64 安装包版本）
  • 进行安装或解压缩（注意路径中不能存在任何中文字符，推荐仅用字母和数字）
  • 到你安装 VSCode 的目录下，新建 data 文件夹

这里我们新建 data 文件夹后，之后 VSCode 运行时的扩展插件和用户数据便都会存放在 data 文件夹下，这样可以在一定程度上避免系统盘容量占用的问题。如果不新建 data 文件夹，那么 VSCode 会将上述插件和用户信息存放在系统盘的用户目录下。

image-20220209213021194

C++ 相关开发环境配置

环境变量与 Mingw64

我们可以先打开终端（Windows 用户请使用 Win+R，输入 cmd），尝试输入：

g++ --version

如果你的终端返回了 g++ 的版本信息，恭喜，您 C++ 编译器的环境变量配置正确，可以跳过这一小节。当然，如果想更加详细地了解环境变量是什么，可以继续阅读这一小节。

而如果返回：

'g++' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

那么则说明你的终端不知道 g++ 是什么命令。我们接下来将首先讲解环境变量是什么，然后再为大家讲述该怎么配置环境变量。

然后，我们需要进行环境变量配置。进入 Mingw64 的安装路径/mingw64/bin/，我们可以看到 gcc，g++ 这些我们熟悉的可执行文件。然后我们需要做的就是将这个文件夹添加至环境变量中。

然后我们就可以打开终端，输入 g++ 验证环境变量是否配置成功。（请注意，在环境变量配置后需要重启终端才能生效）

Make

同时，针对于我们之后课上所需要用到的 make 命令，我们可以将同目录下的 mingw32-make.exe 复制一份，改名为 make.exe，这样我们也能正常使用 make 命令了。

由于 Linux 平台自带了 gcc 和 make 等等编译工具，所以这里不需要进行额外的配置。

扩展插件的安装

我们打开 VSCode，先简单介绍下界面及其功能：

image-20220209220846472

红色框是我们当前项目（即文件夹）下的所有文件清单，蓝色框是我们编写代码的地方，绿色框是我们的应用商店。

这里我们推荐几个扩展，在应用商店中搜索即可下载：

  • Chinese (Simplified) Language Pack for Visual Studio Code：语言
  • Code Runner：调试用
  • C/C++：支持在 Code 中调试 C/C++ 程序
  • Remote - SSH：之后进行远程开发会用到，这里不多做介绍
  • CodeGeex - 国内可用的代码自动补全工具

在安装了简体中文插件后，我们可以按 Ctrl + Shift + P，打开输入框，输入 Configurate display language，选择中文后重新启动即可。

代码调试

如何运行一段代码呢？很简单，我们只需要在对应的代码界面按下 F5 或是在菜单栏找到“运行 > 启动调试”，便可以启动调试模式：

image-20220209221547145

在配置中选择 C++ (GDB)，进而选择 g++.exe。

然后我们会发现项目路径下生成了一个 .vscode 文件夹，内含 tasks.json 和 launch.json，这两个文件分别有什么作用我们即将就会进行介绍。

image-20220209221657511

（你的界面排版可能和我有所不同，不过主要功能是大同小异的，当你熟练运用了 Code 之后你可以自行将这几个框框拖来拖去摆到你觉得舒适的位置）

我们接下来将分单文件项目和多文件项目进行讨论，说明一些在 Code 中调试 C++ 代码的技巧。

单文件项目

单文件项目指只有一个 cpp 文件的项目，main() 函数的定义就在其中，我们在《程序设计基础》课程的大部分平时作业都是这种项目。

这种项目我们直接按 F5 便可进行运行，其输出结果会在“终端”选项卡中出现。

image-20220209222124275

这是一段演示单向平方和双向平方探测在哈希表中可以占用的位置的示例程序，在这里仅做说明使用，大家不必理解其背后的原理。（事实上你给别人调代码的时候不都是这样嘛，对着看不懂的逻辑满脸黑线.jpeg）

想要在程序运行过程中设置断点，我们只需点击对应的行号：

image-20220209222401148

在这里设置断点，程序将会在第 30 行执行完成，第 31 行将要执行的时候触发断点，让我们看一看：

image-20220209222500324

红框，也就是“终端框中，我们的程序输出了前半段运行时产生的 cout 信息。接下来我们将说明该如何查看中间变量：

image-20220209222635735

比如程序在命中这个断点时，我们有以下途径获取中间变量的值：

在黄色框“变量”中，我们可以看到程序自动追溯的局部变量和寄存器值。在蓝色框“监视”中，我们可以自行定义一些需要追溯的变量。在红色框中，我们可以直接输入变量名来查看其对应的值。

image-20220209222812673

然后，我们来将目光放在上述这几个按钮身上。

  • 继续（F5）按钮将会使程序继续执行，直到命中下一个断点或是到程序结尾。
  • 单步跳过（F10）按钮对于程序来说，如果将要执行的行调用了某些函数，那么将直接将本行执行完毕，进入下一行。
  • 单步调试（F11）按钮对于程序来说，如果将要执行的行调用了某些函数，那么将进入将要执行的函数内部。
  • 停止（Shift+F5）按钮终止当前调试工作。

多文件项目

对于多文件项目的调试来说，我们重点关注点在于 .vscode 下两个文件的配置。

首先我们将我们的示例程序修改为多文件项目：

image-20220209223422595

我们采用最简单的方式，将我们的单文件项目魔改成多文件。

我们回忆如果使用命令行，该如何将我们的程序编译：

g++ hash.cpp another.cpp -o main

没错，我们现在配置 Code 使得其在“生成目标文件”任务中执行上述命令。

tasks.json 负责可执行文件的生成，我们主要进行如下修改：

{
    "tasks": [
        {
            "type": "shell", // cppbuild -> shell
            "label": "C/C++: g++.exe 生成活动文件",
            "command": "D:\\Mingw\\mingw64\\bin\\g++.exe",
            "args": [
                "-g",
                "hash.cpp", // ${file} -> your source code list
                "another.cpp",
                "-o",
                "${fileDirname}\\main.exe" // main.exe
            ],
            "options": {
                "cwd": "${fileDirname}"
            },
            "problemMatcher": [
                "$gcc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "detail": "调试器生成的任务。"
        }
    ],
    "version": "2.0.0"
}

launch.json 主要负责调试目标程序，我们做以下修改：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "g++.exe - 生成和调试活动文件",
            "type": "cppdbg",
            "request": "launch",
            "program": "${fileDirname}\\main.exe", // main.exe
            "args": [],
            "stopAtEntry": false,
            "cwd": "${fileDirname}",
            "environment": [],
            "externalConsole": false,
            "MIMode": "gdb",
            "miDebuggerPath": "D:\\Mingw\\mingw64\\bin\\gdb.exe",
            "setupCommands": [
                {
                    "description": "为 gdb 启用整齐打印",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ],
            "preLaunchTask": "C/C++: g++.exe 生成活动文件"
        }
    ]
}

然后我们就可以愉快地调试多文件项目了。

后续学习

  • 自行研究 Remote-SSH 的使用方法，如何连接到外部服务器进行开发
  • 自行研究 Python 配置调试环境的方法
  • 在《软件工程》课程中，使用 Code Prettier 插件 + ESLint 规范项目

资源链接