QT6开发高性能企业视频会议-8 使用VSCode+Copilot AI开发

Github Copilot是Github和OpenAI推出的AI编程辅助工具，之前版本的Github Copilot只有简单的代码自动补全，根据注释生成一些代码等辅助功能。

近期Copilot有了一次大的升级，加入了Agent模式，可以实现自然语言对话讨论和最重要的，根据指定的上下文直接按指令生成或者修改项目代码，做到了类似Cursor的体验，并且基础版是免费使用的。

付费版Copilot可以指定更多的AI模型，包括最新的Claude 3.7等，并且能使用无限次的token。

本文简单介绍如何在Visual Studio Code中集成和使用Github Copilot，以下步骤都需要科学上网。

在Visual Studio Code中集成Copilot插件

首先需要登录Github账号并启用Github Copilot。

然后我们需要为Visual Studio Code安装Github Copilot插件

安装完成后，左侧工具栏会出现Copilot Chat的图标。

使用Chat模式

在Chat模式中，Copilot会自动把当前正在编辑的代码文件代入Chat上下文，我们也可以右键点击某个项目中的文件，在Copilot菜单中把它加入Chat上下文。同时Copilot还支持上传图片，选中代码片段甚至某个GIt Change作为上下文。

之后我们和Copilot的对话中Copilot会自动关联这些上下文的内容做出回应。

这里是一个通过文字描述生成一个QML窗口的例子:

import QtQuick 2.15
import QtQuick.Controls 2.15ApplicationWindow {visible: truewidth: 400height: 300title: "User Login"Column {anchors.centerIn: parentspacing: 20Text {text: "Login"font.pixelSize: 24horizontalAlignment: Text.AlignHCenteranchors.horizontalCenter: parent.horizontalCenter}TextField {id: usernameFieldplaceholderText: "Username"width: parent.width * 0.8anchors.horizontalCenter: parent.horizontalCenter}TextField {id: passwordFieldplaceholderText: "Password"echoMode: TextInput.Passwordwidth: parent.width * 0.8anchors.horizontalCenter: parent.horizontalCenter}Button {text: "Login"width: parent.width * 0.8anchors.horizontalCenter: parent.horizontalCenteronClicked: {// Handle login logic hereconsole.log("Username: " + usernameField.text)console.log("Password: " + passwordField.text)}}}
}

生成之后可以让Copilot帮忙修改

import QtQuick 2.15
import QtQuick.Controls 2.15ApplicationWindow {visible: truewidth: 800height: 400title: "User Login"Row {anchors.centerIn: parentspacing: 20Image {source: "qrc:/images/left_image.png" // Replace with the path to your imagewidth: 300height: 300fillMode: Image.PreserveAspectFit}Column {spacing: 20width: 300Text {text: "Login"font.pixelSize: 24horizontalAlignment: Text.AlignHCenteranchors.horizontalCenter: parent.horizontalCenter}TextField {id: usernameFieldplaceholderText: "Username"width: parent.widthanchors.horizontalCenter: parent.horizontalCenter}TextField {id: passwordFieldplaceholderText: "Password"echoMode: TextInput.Passwordwidth: parent.widthanchors.horizontalCenter: parent.horizontalCenter}Button {text: "Login"width: parent.widthanchors.horizontalCenter: parent.horizontalCenteronClicked: {// Handle login logic hereconsole.log("Username: " + usernameField.text)console.log("Password: " + passwordField.text)}}}}
}

Chat模式除了可以用自然语言进行交流，还可以使用一些关联到Visual Studio Code的预制指令，具体可以在Chat窗口中输入/查看