DevChat：将 GPT-4 无缝融入 VS Code，极致提升你的编程体验

胡涛 | Daniel Hu 收录于 DevChat

2023-06-28 约 4875 字预计阅读 10 分钟

/devchat-gpt4-vscode-integration/banner.jpeg

一、絮絮叨叨

用 GPT 辅助编程是啥体验？用 DevChat 辅助编程是啥体验？体验就是，每天和这货聊聊天，事情就干完了，你看：

每天上午睡懒觉，中午睡午觉，下午醒来就和 DevChat 唠唠嗑，然后这货就帮我写了几百行代码。

赶在下班前一个提交，

老板还得夸我效率高，

“辛苦辛苦，写这么多！”

今日个早起了吧？

中午忘了休息吧？

累坏身体可不行，

早点下班，回家吧~

（呵，可能让老板知道这个“秘密武器”，不然得给我派三个人的活！）

1.1 缘起

四月底的一个早上，CEO 拉我开了一个 1-1 的会。

他问：“胡涛，你怎么看 ChatGPT 和 GPT-4？”
我答：“我觉得第四次工业革命真的来了。”
他又问：“要不，来一块搞点事情吧？”
我又答：“好！”

1.2 嫌弃

后来过了没过多久 DevChat 就发布了一款 VS Code 插件，提供了“一站式 AI 辅助编程”体验。但我并不是第一批用户。没错，我自己都不用，哇咔咔，你敢信？（别纳闷，参与 DevChat 项目 != 参与插件开发）

我习惯在网页上用 ChatGPT，写代码的时候一个屏幕开着 Goland/Pycharm，另一个屏幕开着浏览器，里面常驻两个 tab 页，ChatGPT 和 Google。而且我作为 JetBrains 用户，从第一份工作开始就一直在用 JetBrains 系列 IDE 的7年死忠粉，没有足够的理由是很难说服我转到 VS Code 阵地的。

不过想想为了用上 GPT-4，千方百计搞过虚拟电话卡，搞过海外信用卡，倒腾好一阵也没有成功。但是现在 DevChat 直接对接 GPT-4 还让免费用，这也确实也够鼓动我试用一下 DevChat 了。这不，前不久，我试着下载了 VS Code，试着用了一下 DevChat。好家伙，那天晚上我没忍住，在内部群里抛了好几个 bug，然后：

WTF 啊，

你们用了个把月都没发现 bug 吗？

啊……

气人啊……

这几个程序员是不是有 bug 不修啊……

1.3 征服

我是一个“Late Majority”，你很难说服我去使用一个刚推出的新工具，因为尝鲜需要成本，我坚信十次尝鲜九次失望。同时我是也是一个苛刻的人，会过分看重细节，又患强迫症晚期……

“鸿沟理论”里的“后期多数派”（Late Majority）：这个群体的人们通常会在大多数人已经接受新产品或新想法后，才会选择接受。他们通常对新事物持有疑虑，需要看到明显的证据才会接受。

所以每次一个陌生的工具落到我的手里，都免不了被一顿挑刺。有时候我甚至觉得自己适合去当一个产品经理或者测试工程师。最后这些工具在我这里只能得到2种评价：

“S**T！”
“还行”

没错，我嘴里的“还行”差不多就是最高评价了。

所以 DevChat VS Code 插件在我这里被喷再正常不过了。不过喷完之后，我发现这东西确实解决了实际问题，能够帮我进一步提升编程效率。使用网页版 GPT 时遇到的很多切实的麻烦事被它解决了。哎，找谁说理去啊，骂都骂了，结果发现，这东西还蛮好用的嘞。

（其实我也奇怪，为什么老板一直没有“强迫”大家用。他坚信酒香不怕巷子深？管他呢。反正，我尝到甜头了，而且免费续杯，我没理由拒绝。）

二、认真聊聊

咳咳，我要认真了。

少年，既然你看到了这里，我想你对 DevChat 到底能干啥，到底怎么用，到底还是感兴趣的。那好，你负责扶着方向盘，让 DevChat 当你的领航员，体验一把和 AI 结对编程的乐趣！

剧透：下文会演示如何让 DevChat 代劳，一步一步完成框架选择、代码编写、Dockerfile 编写、Helm Chart 打包、拉起 Kubernetes 集群测试 Chart 包、解决运行错误、编写 commit message……

2.1 老板给了少年一个任务

老板：“少年，你用 Golang 写一个 API 服务吧，跑 Kubernetes 里……”

少年并不会写 Golang，少年擅长的是写业务代码。于是，少年试着装了 DevChat，试着把“脏活累活”都给 GPT 去做。

2.2 少年祭出了 DevChat

先准备一个 Git 仓库

1
2
3


$ mkdir golang-webapp
$ cd golang-webapp
$ git init

接着打开 VS Code，安装 DevChat 插件

到 https://www.devchat.ai 注册一个 key

注册只需要提供用户名和邮箱，完成注册后，少年收到了一封包含 key 的邮件：

配置 DevChat

接着将 key 配置到 DevChat 插件（Mac：⌘ + , | Windows：Win + , ）：

来，打个招呼

随便说点啥，如果 DevChat 回复你了，恭喜，一切顺利，少年露出了笑颜！

2.3 让 DevChat 帮着选 web 框架

少年：我需要用 Golang 写一个 API 服务，跑 Kubernetes 里。首先请帮我选择一个合适的 web 框架。

DevChat 给出了 4 个选项，你可以进一步针对每个框架追问 DevChat 相关的细节，也可以选择直接 Google 查询这个框架的官网地址，进去看详细文档。这里少年选择了 Gin。

2.4 让 DevChat 帮着写代码

少年：请告诉我如何用 Gin 框架来写一个 webapp，我需要一个能运行的示例，比如实现一个 GET /ping 接口。

少年跟着操作了一下：

安装 Gin

1
2
3
4
5
6
7
8


$ go get -u github.com/gin-gonic/gin

go: go.mod file not found in current directory or any parent directory.
        'go get' is no longer supported outside a module.
        To build and install a command, use 'go install' with a version,
        like 'go install example.com/cmd@latest'
        For more information, see https://golang.org/doc/go-get-install-deprecation
        or run 'go help get' or 'go help install'.

报错了，正如一开始所说，少年并不擅长 Golang，所以嘛，掉坑太正常了。不过没关系，少年反手就把这段错误一个复制，直接贴给 DevChat，没心情思考，没动力解释，让 DevChat 自己意会：

DevChat: 看起来你的 Go 环境没有启用 Go Modules，这是 Go 1.11 以后版本推出的一种依赖管理工具。在 Go 1.16 以后，go get 命令在没有 go.mod 文件的环境下不再支持获取依赖。

你可以通过以下步骤来创建一个新的 Go module 并获取 Gin 框架：

在你的工作目录下，运行 go mod init <module-name> 来初始化一个新的 Go module。这里的 <module-name> 是你的模块名，通常是你的项目在版本控制系统中的路径，例如 github.com/yourname/yourproject。
1
go mod init github.com/yourname/yourproject
这将会在当前目录下创建一个 go.mod 文件。

然后，你可以使用 go get 命令来获取 Gin 框架：
1
go get github.com/gin-gonic/gin
这将会下载 Gin 框架，并更新你的 go.mod 和 go.sum 文件。

现在，你可以开始编写你的 web 应用了。

少年对着操作了一下：

很和谐，成功了。

插入代码

继续跟着 DevChat 的节奏走，创建一个 main.go 文件，然后，magic：

运行，测试

还记得 DevChat 说怎么测试吗？少年继续跟着操作：

跑通了，代码架子有了。

2.5 让 DevChat 帮着写 Dockerfile

写 Dockerfile 需要注意啥？

不好意思，记不得，注意事项太多了。少年决定继续让 DevChat 全权包干：

在说出“接下来请帮我写一个 Dockerfile，我要将这个 golang-webapp 打包到容器里。”之前，这里多了一步操作，也就是将 main.go 添加到了 DevChat 上下文，这样 DevChat 就能根据这个信息，给出更加准确的 Dockerfile 了，比如 DevChat 因此会知道这个应用监听的是 8080 端口。

最后 DevChat 还说可以运行下面命令测试：

1
2


docker build -t golang-webapp .
docker run -p 8080:8080 golang-webapp

构建镜像

启动运行（前置条件是装好了 Docker Desktop）

2.6 让 DevChat 帮着封装 Helm Chart

少年：好的，我已经完成了 Dockerfile 的测试，成功构建出了镜像 golang-webapp:latest，现在我希望将其通过 Helm Chart 的方式打包，请告诉怎么做。

DevChat：要使用 Helm Chart 打包你的应用，你需要首先安装 Helm。然后，你可以按照以下步骤来创建和配置你的 Helm Chart：

创建一个新的 Helm Chart：
1
helm create mychart
这将在当前目录下创建一个名为 mychart 的新目录，其中包含了一个基本的 Helm Chart 结构。

修改 mychart/Chart.yaml 文件，更新 chart 的描述和版本信息。

在 mychart/values.yaml 文件中，你需要配置你的应用的 Docker 镜像和端口。例如：
1
2
3
4
5
6
7
8
image:
  repository: golang-webapp
  tag: latest
  pullPolicy: IfNotPresent

service:
  type: ClusterIP
  port: 8080
在 mychart/templates/deployment.yaml 文件中，你需要确保你的应用的 Docker 镜像和端口被正确地使用。例如：
1
2
3
4
5
6
7
8
9
spec:
  containers:
    - name: {{ .Chart.Name }}
      image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
      imagePullPolicy: {{ .Values.image.pullPolicy }}
      ports:
        - name: http
          containerPort: 8080
          protocol: TCP
最后，你可以使用以下命令来打包你的 Helm Chart：
1
helm package mychart
这将创建一个名为 mychart-0.1.0.tgz 的文件，其中包含了你的 Helm Chart。你可以将这个文件部署到你的 Kubernetes 集群。

注意：以上步骤假设你的 Docker 镜像已经被推送到一个可以访问的 Docker registry。如果你的 Docker 镜像仍然在你的本地机器上，你需要首先将它推送到 DockerHub 或其他 Docker registry。

行吧，咱照着这个步骤试试：

helm create

太强了，由衷对 Helm 命令竖起大拇指，一行就能出来一个和谐的脚手架！

更新 values.yaml

在 values.yaml 里 service 和 image 的配置并没有挨着，所以少年插入 DevChat 给的配置后，将 service 相关的配置往后面挪了挪：

然后在大约 40 行左右直接修改 service.port，把默认的 80 改成 8080：

1
2
3


service:
  type: ClusterIP
  port: 8080

更新 deployment.yaml

DevChat 提到需要注意 deployment.yaml，不过打开这个文件后，其实可以看到 containerPort 不需要修改，它的值从 values.yaml 里读取，错不了。不过这里得留意下 livenessProbe 和 readinessProbe 的 path，显然默认值是 /，但是少年只实现了 /ping 这个 API，所以得相应更新下这里才行：

helm package

1
2


$ helm package golang-webapp
Successfully packaged chart and saved it to: /Users/danielhu/Work/golang-webapp/golang-webapp-0.1.0.tgz

2.7 让 DevChat 帮着拉起 K8s 集群以便测试应用

少年：我已经打出了相应 Chart 包 golang-webapp-0.1.0.tgz，本地也有了镜像 golang-webapp:latest，下面请告诉我如何在本地用 minikube 启动一个测试用的 k8s 集群，并且将我的 Helm 包部署上去测试。我的本地环境是 Macbook M1，已经安装好了 Docker Desktop。

DevChat：首先，你需要在你的本地机器上安装 Minikube。Minikube 是一个工具，可以让你在本地运行 Kubernetes。你可以使用 Homebrew 来安装 Minikube：
1
brew install minikube
然后，你可以使用以下命令来启动一个 Minikube 集群：
1
minikube start --driver=docker
这将使用 Docker 驱动来启动一个 Minikube 集群。如果你的本地机器上已经安装了 Docker，这是最简单的方式。

接下来，你需要将你的 Docker 镜像加载到 Minikube 的 Docker daemon 中。你可以使用以下命令来做到这一点：
1
minikube image load golang-webapp:latest
现在，你可以使用 Helm 来部署你的应用。首先，你需要添加你的 Helm Chart 到本地的 Helm repository：
1
helm repo add local file://path/to/your/chart/directory
然后，你可以使用以下命令来部署你的应用：
1
helm install myapp local/golang-webapp
这将部署你的应用到 Minikube 集群。你可以使用以下命令来检查你的应用的状态：
1
kubectl get pods
如果一切正常，你应该能看到你的应用正在运行。

少年照抄作业，一步步继续执行：

安装 minikube

1

brew install minikube

用 minikube 拉起一个默认 K8s 集群

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


$ minikube start --driver=docker
😄  minikube v1.29.0 on Darwin 13.1 (arm64)
✨  Using the docker driver based on existing profile
🎉  minikube 1.30.1 is available! Download it: https://github.com/kubernetes/minikube/releases/tag/v1.30.1
💡  To disable this notice, run: 'minikube config set WantUpdateNotification false'

👍  Starting control plane node minikube in cluster minikube
🚜  Pulling base image ...
🤷  docker "minikube" container is missing, will recreate.
🔥  Creating docker container (CPUs=2, Memory=4000MB) ...
🐳  Preparing Kubernetes v1.26.1 on Docker 20.10.23 ...
🔗  Configuring bridge CNI (Container Networking Interface) ...
🔎  Verifying Kubernetes components...
    ▪ Using image gcr.io/k8s-minikube/storage-provisioner:v5
🌟  Enabled addons: storage-provisioner, default-storageclass
🏄  Done! kubectl is now configured to use "minikube" cluster and "default" namespace by default

load 镜像到 minikube 环境

1

minikube image load golang-webapp:latest

部署 Helm Chart

DevChat 说可以执行类似这样的命令：

1
2


helm repo add local file://path/to/your/chart/directory
helm install myapp local/golang-webapp

少年不信。显然这时候应该执行：

1

helm install myapp ./golang-webapp-0.1.0.tgz

不过不管少年是不是能一眼看穿 GPT 的这次“一本正经地胡说八道”，都不打紧，执行一下，发现报错，把错误再次通过 DevChat 告诉 GPT，也能很快得到正确的操作步骤。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


$ helm install myapp ./golang-webapp-0.1.0.tgz
NAME: myapp
LAST DEPLOYED: Thu Jun 29 15:51:10 2023
NAMESPACE: default
STATUS: deployed
REVISION: 1
NOTES:
1. Get the application URL by running these commands:
  export POD_NAME=$(kubectl get pods --namespace default -l "app.kubernetes.io/name=golang-webapp,app.kubernetes.io/instance=myapp" -o jsonpath="{.items[0].metadata.name}")
  export CONTAINER_PORT=$(kubectl get pod --namespace default $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
  echo "Visit http://127.0.0.1:8080 to use your application"
  kubectl --namespace default port-forward $POD_NAME 8080:$CONTAINER_PORT

检查部署结果

行，到此，架子基本就搭好了。

2.8 让 DevChat 帮着写 Commit Message

一时没收住，干的事有点多了。到了提交代码的时间，这次不用为 commit message 如何写而烦恼了，少年刚才写了 Golang 代码，Dockerfile，Helm Chart，分3个 commits，且看 DevChat 如何丝滑完成这个任务：

git add 添加你的第一个 commit 想要包含的内容

既然要分成几个 commits，自然需要先将第一个 commit 的“范围” add 一波：

让 DevChat 拿着 git add 的 cache 内容去写 commit message

点击“+”将刚才 git add 的内容加入会话上下文，然后告诉 DevChat 执行“commit_message”命令，就可以拿到 GPT-4 总结的 commit message 了

提交 commit

DevChat 会输出一段 commit message 备选文案，少年可以点击复制，然后自己编辑后手动 git commit -m，也可以直接点击 “commit” 按钮。

重复这个过程，完成剩下的 commits

最终少年得到了这样3个commits：

1
2
3
4


$ git log --oneline
b54b57a (HEAD -> master) Add Helm chart for Golang web application
a528930 Add Dockerfile for Go application
4057bac Add project dependencies and basic server setup

当然，对于 DevChat 给出的结果，少年也可以根据自己的口味微调后再提交，不过今天少年只想偷懒，毕竟，现在的结果已经比满屏“Update”好看太多了。

最后，当然你还可以继续让 DevChat 协助你完成具体的业务代码编写，测试用例编写，CICD 配置等等。不过，我就不再此继续赘述了。

三、心动了吗

如你所见，我并没有演示 DevChat 的全部能力，不过管中窥豹，我相信你已经感受到了在软件项目开发过程中使用 DevChat 和使用“网页版 GPT 们”有啥区别。

如你所见，DevChat 并不是简单地将 ChatGPT 那个聊天框搬到了 VS Code 里，而是在此之上结合软件开发过程的各种场景，尽可能优化使用体验，将“GPT-4 与 VS Code 之间的那个缝”逐渐填平！

还在等什么？还不赶紧到 https://www.devchat.ai 注册一个 key，然后试着开始用 DevChat 编程？！

BTW：

GitHub：https://github.com/devchat-ai
注册网站：https://www.devchat.ai
微信群：注册后会收到一封邮件，内附群二维码
Discord：https://discord.gg/9t3yrbBUXD
微信公众号：微信号为“devchat-ai”，名称暂为“思码逸智能编程”