《VSCode 与 QT：强强联合的开发利器》

一、VSCode 和 QT 简介

新版本QT加入AI助理：https://www.qt.io/zh-cn/product/development-tools
1、Qt Creator是跨平台的集成开发环境（IDE），专为最大限度地提高开发者的工作效率而定制。Qt Creator支持在编程过程中使用GitHub Copilot等编码助手。它帮助开发者为桌面、移动端和嵌入式平台创建软件。

2、Visual Studio Code:（VSCode）是一款强大的代码编辑器，具有诸多显著特点。它拥有强大的代码编辑能力，智能代码补全、语法高亮和代码片段极大地提高了编程效率。其丰富的插件生态系统更是为开发者提供了广阔的定制空间，数以千计的插件覆盖了从代码格式化到数据库管理等几乎所有编程相关领域。强化的代码调试支持使得查找和修复代码问题变得直观高效，支持多种编程语言和框架，还具备远程调试功能。此外，易于定制的用户界面允许用户通过安装不同主题、调整布局等方式创建符合个人偏好的工作环境。

3、Qt: 作为跨平台开发框架优势明显。首先，跨平台性强是其最引人注目的特点，开发者可以使用一套代码轻松部署到 Windows、MacOS、Linux、iOS、Android 等多个平台上，大大降低了开发和维护成本。Qt 拥有丰富的组件库，无论是基础的用户界面构件，还是复杂的网络通信、数据库操作，都能提供高效的实现方案。同时，Qt 编程具有高效的开发效率，支持 C++ 语言并提供 QML 声明式编程语言，信号与槽机制减少了程序耦合度，让应用程序设计更加模块化。

二、VSCode 与 QT 的结合方法

（一）下载与安装

VSCode 可以从其官方网站（https://code.visualstudio.com/）进行下载，根据不同的操作系统选择对应的版本。下载完成后，一路 “next” 进行安装，安装过程中可将软件安装目录、插件安装目录和缓存目录选择到非系统目录，以提高系统性能和便于后期管理。
Qt 的下载可以从 Qt 官方网站（https://download.qt.io/）进行。注意从 Qt 5.15 开始，开源离线安装程序不再可用，可选择合适的版本进行离线安装。安装时注意选择合适的组件，安装目录不要放在系统盘，以免占用过多系统资源。
相关工具如 Cmake 可从 Cmake 官方网站（https://cmake.org/）进行下载，按照描述选择对应的安装方式。

（二）配置开发环境

配置环境变量，包括 QT 和相关工具的路径设置。
QT 环境变量设置：选择新建，前两个路径是安装时选择的版本套件的目录和 bin 目录；第三个是 QT 的 GCC 和 G++ 的执行文件的路径；最后一个可以不添加，点击确定保存设置。之后启动 cmd，输入gcc -v，如果显示版本，则代表设置成功。
Cmak 环境变量设置：将安装 cmake 的路径中的 bin 目录添加到系统环境变量中。配置完成在 cmd 中输入cmake --version，显示版本则代表安装成功。
安装插件，如 C/C++、Chinese、Cmake 和 Cmake Tool、Qt Configure、Qt tools 等插件的作用和安装方法。
C/C++：使用 C/C 语言编写代码。
Chinese：VsCode 汉化，安装完成，重启 VsCode 即可。
Cmake 和 Cmake Tool：作用可以参考博客园 - 可可西。
Qt Configure：具体描述可以查看该插件的 “细节” 部分，用于配置 Qt 开发环境。
Qt tools：具体描述可以查看该插件的 “细节” 部分，可用于打开 UI 文件等操作。
具体配置步骤，如 Cmake Tool 配置、QT Configure 配置等。
Cmake Tool 配置：这里需要执行 Cmake 的可执行文件的路径，一定要包含文件名。
QT Configure 配置：这里需要设置 Mingw Path、Qt Dir 和 Qt Kit Dir。Mingw PAth 设置了环境变量的话应该是自动有的，如果没有，手动添加一下；Qt Dir 是 QT 的安装目录；Qt Kit Dir 是套件的路径，找到自己对应的套件的路径，复制到这里。配置完成重启 VsCode，以防设置不生效。

三、使用 VSCode 和 QT 进行项目开发

（一）新建项目

新建项目的方法，包括使用快捷键和菜单操作。
在 VSCode 中，可以使用快捷键 Ctrl + Shift + P 打开命令面板，然后输入 QtConfigure: New Project 来新建项目。也可以通过菜单操作，找到相应的插件入口进行项目创建。
选择套件和编译工具，根据项目需求选择合适的套件和构建工具。
在新建项目过程中，会提示选择套件和编译工具。如果项目需要跨平台开发，可以选择支持多个平台的套件。对于编译工具，根据项目的具体需求和开发环境来选择，比如 MinGW、MSVC 等。如果项目对性能要求较高，可以选择优化较好的编译工具。
项目初始状态和自动生成的文件，如 CMakeLists.txt 文件的作用。
项目初始状态通常会包含一些基本的文件结构，其中 CMakeLists.txt 文件起着关键作用。它是 CMake 构建系统的配置文件，用于定义项目的构建规则。通过这个文件，可以指定项目的源文件、依赖库、编译选项等。例如，可以在 CMakeLists.txt 文件中添加对 Qt 库的依赖，指定编译目标等。

（二）编译运行

检查编译工具，确保工具正常识别和配置。
在进行编译之前，需要检查编译工具是否被正确识别和配置。可以通过在 VSCode 的命令面板中输入相关命令来检查，比如输入 cmake --version 检查 CMake 是否安装正确且被识别。如果工具没有被正确识别，需要检查环境变量设置和插件配置是否正确。
进行编译操作，包括使用快捷键和命令行编译。
可以使用快捷键 F7 或者在命令面板中输入 CMake: Build 进行编译。也可以使用命令行编译，在项目目录下打开终端，执行相应的编译命令。例如，如果使用 MinGW 进行编译，可以执行 mingw32-make -j16 debug 命令进行编译。
运行项目，查看运行效果和调试方法。
编译完成后，可以运行项目。可以通过快捷键 Ctrl + F5 执行运行操作或者在命令面板中输入 CMake: Debug 来运行项目。运行项目后，可以查看运行效果。如果项目出现问题，可以使用调试方法进行排查。在 VSCode 中，可以设置断点进行调试，通过查看变量值、调用栈等信息来定位问题。

（三）新增文件和资源

新增 UI 文件和操作方法，包括打开 Qt 设计器和手动添加对应文件。
要新增 UI 文件，可以在 VSCode 中通过快捷键 Ctrl + Shift + P 打开命令面板，然后输入 QtConfigure: Open in Qt Designer 来打开 Qt 设计器。在 Qt 设计器中可以进行界面设计，保存后会自动生成对应的 .ui 文件。也可以手动在项目目录中添加 .ui 文件，然后在代码中进行加载和使用。
新增资源文件，如创建 qrc 文件、编写 qrc 文件和添加资源文件到可执行文件。
创建资源文件时，首先在项目目录中创建一个资源文件夹，比如命名为 res。然后在该文件夹中创建一个 .qrc 文件，可以使用命令行创建，如 touch res/res.qrc。编写 .qrc 文件时，使用标签的方式添加资源，例如 logo.png。添加资源文件到可执行文件需要修改 CMakeLists.txt 文件，设置自动处理 Qt 资源文件和将资源文件添加到可执行文件中，如 set(CMAKE_AUTORCC ON) 和 qt_add_executable(Xpass ${PROJECT_SOURCES} ${PROJECT_RESOURCES})。
使用资源文件，包括在程序中读取样式表和应用样式。
在程序中使用资源文件时，可以读取样式表并应用样式。例如，读取样式表可以使用 QFile file(“:/style.qss”); file.open(QFile::ReadOnly); QString styleSheet = QLatin1String(file.readAll());，然后应用样式表可以使用 l.setStyleSheet(styleSheet);。在读取资源文件中的图片等资源时，需要注意路径问题，使用正确的路径格式，如 QLabel{background-image: url(:/logo.png);}。

四、开发注意事项

（一）常见问题及解决方法

下方选项卡没有 kit 的问题及解决步骤。
按 F1，输入 cmake，选择 “扫描工具包”，如果扫描到了，再次按 F1，输入 cmake，选择 “选择工具包”，选择设置环境变量路径下的 GCC 和版本即可。
如果下方的图中没有，但是环境变量又设置好了，那么参考下面的问题解决方法。
选择工具包时没有设置环境变量的问题及解决方法。
按 F1，输入 cmake，选择配置本地 cmake 工具包。
复制原有的配置信息，进行更改，将 QT 的 GCC 和 G++ 路径复制保存即可。
再次点击最下面选项卡的 build 编译工具，就会出现正确的编译工具了。
创建完项目没有下方选项卡和 Cmake 没有 “选择套件” 选项的问题及解决方法。
按 F1 输入 Cmake，选择配置，这里会自动配置该项目，如果你没有其他的 gcc 工具，那么 kit 选项卡应该是可以识别的。

（二）开发中的特殊情况处理

QDebug 无法输出问题的解决方法。
屏蔽掉 CMakeLists add_executable WIN32 配置。根据搜索结果，QT 应用编程中解决 Visual Studio 下使用 qDebug 没有输出、输出中文乱码问题时提到设置子系统为控制台，虽然这里是在 VSCode 和 QT 的环境下，但可以作为一种参考思路。另外，在 qt 中 qDebug () 无法输出解决办法中提到在工程文件.pro 的最后添加 CONFIG += console，将工程文件编译过的文件清除，执行 qmake 后重新编译项目等步骤也可以尝试。
Qt 使用 CMake 编译时自定义控件引用问题的处理。
方法一：可以在.ui 文件中直接对 header 标签指定路径，如 myqscrollarea.h 改为…/src/myqscrollarea.h。但这种方法缺点明显，每使用一个自定义控件都要手动去修改.ui 文件对自定义控件的引用路径。
方法二：使用 include_directories 将指定目录添加到编译器的头文件搜索路径之下，指定的目录被解释成当前源码路径的相对路径。如在 CMakeLists 配置中设置 set(SRC_DIR “…/helloqt/src”) 和 set(CONTAINERS_DIR “…/helloqt/src/containers”)，然后 include_directories($SR{C}_{D}IR)和includ{e}_{d}irectories(${CONTAINERS_DIR})。如果文件在其他目录，则相应地调整路径设置。同样，在 Qt 使用 CMake 编译时自定义控件找不到的问题中提到，如果是用 qmake 构造的项目，则没有这个问题，但如果是 CMake 编译，可以加上 set(SRC_DIR “./”) 和 include_directories(${SRC_DIR})，如果文件在其他目录则调整路径设置。

五、VSCode 与 QT 的优势对比

（一）集成开发环境的全面性

VSCode 是一款轻量级的代码编辑器，虽然通过插件可以扩展其功能，但在初期可能需要用户投入时间来配置环境和寻找合适的插件，以实现相对全面的开发环境。相比之下，QT Creator 作为 Qt 的官方集成开发环境，提供了一站式的服务，包括项目管理、源代码编辑、调试、界面设计等一系列功能，几乎涵盖了开发流程的所有方面。这种集成度高的环境可以显著提升开发效率，尤其适合那些涉及大量界面设计的项目。例如，在进行复杂的图形用户界面开发时，QT Creator 内置的图形界面设计工具可以让开发者更加直观地进行界面布局和设计，而无需借助其他外部工具。

（二）编程语言的支持范围

VSCode 作为一款现代化的编辑器，其支持的编程语言非常广泛，包括但不限于 C/C++、Python、JavaScript 等，配合不同的插件甚至可以满足几乎所有编程语言的开发需要。这种广泛的语言支持范围使得 VSCode 能够服务于更加多样化的项目需求。而 Qt 虽然主要聚焦于 C++，但也提供了对其他语言的支持，如 Python 等，通过 PyQt 等框架进行扩展。然而，其核心优势仍然集中在为 C++ 开发者提供一个强大的图形界面构建工具。例如，对于一个需要同时使用多种编程语言进行开发的项目，VSCode 可以通过安装相应的插件轻松切换不同语言的开发环境，而 Qt 在这方面可能需要借助外部工具或框架来实现对其他语言的支持。

（三）用户界面设计的便利性

在用户界面设计方面，Qt 拥有明显的优势。通过 Qt Designer，开发者可以利用所见即所得（WYSIWYG）的方式来设计和构建用户界面，这使得界面设计变得直观而高效。进一步地，Qt 提供了大量预制的界面组件以及对复杂界面元素的支持，可以极大地提升开发速度并降低复杂性。而 VSCode，虽然可以通过插件支持界面设计，但其核心依旧是作为代码编辑器，界面设计并非其强项，通常需要借助于其他工具或框架来完成。例如，在开发一个具有复杂用户界面的应用程序时，使用 Qt Designer 可以快速地搭建出界面框架，并通过信号与槽机制轻松实现界面交互逻辑，而在 VSCode 中可能需要使用第三方的界面设计工具，并通过手动编写代码来实现界面交互，这无疑增加了开发的难度和工作量。

（四）跨平台开发的支持

Qt 在跨平台开发方面提供了强大的支持，包括 Windows、Linux、macOS 等，甚至可以扩展到嵌入式开发。它的这一能力确保了一次开发，多平台部署，显著降低了开发和维护的复杂度。VSCode 作为编辑器，在跨平台支持方面也表现出色，但它更多依赖于基于 Node.js 和 Electron 的技术栈，以及社区提供的插件来实现特定环境下的开发需要。例如，对于一个需要同时在多个平台上发布的应用程序，使用 Qt 可以使用一套代码实现多平台部署，而在 VSCode 中可能需要针对不同的平台进行一些额外的配置和调整，以确保插件的正常运行和开发环境的一致性。

六、案例分析

（一）GUI 程序开发案例

在 win10 环境下，我们来详细了解第一个 GUI 程序的开发过程。

1. 新建空白窗体

在开始菜单中找到刚刚安装的 QT creator。在左侧工具栏的 “欢迎” 标签栏选择新建一个 project。创建一个 qt widgets Application。给新的工程命名。点击下一步。勾选下图所示选项，选用所有的 kit，点击下一步。点击左侧工具栏的运行按钮，会弹出一个空白的窗体。

2. Qt Designer 窗口各部分简介

通过 GUI 例程讲解 Qt Creator 开发基本操作。打开自带的计算机例程。在左侧的工具栏点击 “欢迎”。选择 “示例”，在搜索栏中输入 “calculat”。选择 “calculator Form Example” 点击进入到教程界面。教程非常详细。
Qt Designer 窗口主要由菜单栏、工具栏、对象浏览器、属性编辑器等部分组成。菜单栏提供了各种操作选项，如文件操作、编辑、视图等。工具栏包含常用的工具按钮，方便快速执行一些操作。对象浏览器可以查看和管理项目中的对象层次结构。属性编辑器用于设置和修改选中对象的各种属性，如大小、位置、颜色等。

3. 文件结构说明

双击 UI 文件切换到设计模式。这里可以通过拖着的方式直接创建用户界面的相关静态控件。可直接修改属性值，不用编写代码。在控件上右键选择 “转到槽” 可以直接选择这个控件提供的事件。比如单击呀、销毁呀、创建呀等。双击你选择的事件，就自动跳转到了编辑页面的事件代码段。这个事件的函数已经自动创建了。你只需要在里面写如你想要在该事件触发时需要进行的操作代码即可。这个方式大大加快了 UI 界面的开发效率。

4. 简单更改演示

这个例子演示了在上一个计算机例程中添加了一个按钮，在按钮上添加了 click 事件，使用户在点击按钮后，在计算器的结果显示框里显示 “Hello world！”。具体操作如下：在设计模式下，从工具栏中拖出一个按钮控件到界面上。然后右键点击按钮，选择 “转到槽”，选择 “clicked ()” 信号。在自动生成的槽函数中添加代码，实现显示 “Hello world！” 的功能。

（二）qml 程序开发案例

Qt 自带了很多例子程序，我们选择其中一个进行测试。（其实自带的例子是最好的自学资料）。

1. 选择示例
   选择自带的例子后，会弹出另外一个界面，是对这个例子的详细介绍。点击其中的 “run example”。就在 IDE 里打开了。
2. 运行程序
   然后点击左侧工具栏的小箭头运行程序就能看到一个计算器的界面。可以直接操作。以一个简单的 qml 程序为例，展示其基本结构和功能。

import QtQuick 2.9
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
}

这个例子创建了一个简单的窗口，设置了宽度、高度和标题。通过 Qt 的 qml 语言，可以快速构建出美观的用户界面。

（三）简单计算程序案例

以计算圆面积的例子展示 VSCode 和 QT4 的结合使用。

1. 文件结构
   计算圆面积的程序通常包含以下几个文件：main.cpp、dialog.h、dialog.cpp、CMakeLists.txt 与 c_cpp_properties.json。目录结构清晰，方便管理和维护代码。
2. 代码分析
   以下是一个用 C++ 实现计算圆面积的示例代码：

#include <QApplication>
#include <QTextCodec>
#include "dialog.h"

int main(int argc, char* argv[]) {
    QApplication a(argc, argv);
    // 解决中文显示问题
    QTextCodec::setCodecForCStrings(QTextCodec::codecForLocale());
    QTextCodec::setCodecForTr(QTextCodec::codecForName("utf8"));
    Dialog dialog;
    dialog.show();
    return a.exec();
}

在这个例子中，通过 Qt 的图形界面框架，实现了一个简单的对话框程序，用户可以在其中输入圆的半径，然后计算并显示圆的面积。
通过这些案例，我们可以更好地理解 VSCode 和 Qt 在不同场景下的应用，为实际开发提供参考和借鉴。

七、总结与展望

（一）结合优势总结

VSCode 和 QT 的结合为开发者带来了诸多优势。首先，VSCode 的轻量级和高度可定制性与 QT 的强大跨平台开发能力相得益彰。开发者可以根据自己的需求和偏好，灵活配置 VSCode 的插件生态系统，同时利用 QT 的丰富组件库和高效的开发工具，快速构建出高质量的跨平台应用程序。
其次，这种结合使得开发过程更加高效。VSCode 的智能代码补全、语法高亮等功能，以及 QT 的信号与槽机制和可视化设计工具，大大减少了开发中的重复性工作，提高了代码的质量和可维护性。
再者，对于不同类型的项目和开发者，这种结合提供了更多的选择和灵活性。无论是小型项目还是大型复杂应用，无论是新手开发者还是经验丰富的专业人士，都可以根据项目需求和个人技能，选择合适的开发工具和方法。

（二）未来发展展望

在未来，VSCode 和 QT 的结合有望在以下几个方面继续发展。

更强大的集成

随着技术的不断进步，VSCode 和 QT 的集成将更加紧密。插件的功能将不断增强，可能会出现更多专门针对 QT 开发的插件，提供更全面的开发支持，如更智能的代码生成、更高效的调试工具等。同时，QT Creator 也可能会借鉴 VSCode 的一些优秀特性，进一步提升其开发体验。

人工智能辅助开发

人工智能在软件开发中的应用越来越广泛。未来，可能会出现基于人工智能的插件，为 VSCode 和 QT 开发提供智能代码建议、自动错误检测和修复等功能，提高开发效率和代码质量。
跨平台开发的进一步优化
随着移动设备和物联网的发展，跨平台开发的需求将越来越大。VSCode 和 QT 将继续优化跨平台开发的支持，提供更好的性能和用户体验。例如，在移动平台上的开发将更加便捷，可能会出现更多针对移动设备的开发工具和插件。

社区的持续发展

VSCode 和 QT 都拥有庞大而活跃的社区。社区将继续为这两个工具的发展做出贡献，提供更多的插件、教程和案例分享。开发者可以通过社区交流和合作，共同推动 VSCode 和 QT 的发展。
总之，VSCode 和 QT 的结合具有巨大的优势和潜力。在未来的软件开发中，这种结合将继续发挥重要作用，为开发者提供更好的开发体验和更高质量的应用程序。