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


## 一、絮絮叨叨

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

![](vscode.png)

每天上午睡懒觉，中午睡午觉，下午醒来就和 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”，你很难说服我去使用一个刚推出的新工具，因为尝鲜需要成本，我坚信**十次尝鲜九次失望**。同时我是也是一个苛刻的人，会过分看重细节，又患强迫症晚期……

> ["鸿沟理论"](https://en.wikipedia.org/wiki/Diffusion_of_innovations)里的“后期多数派”（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 仓库**

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

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

![](install.png)

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

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

![](sign-up.png)

- **配置 DevChat**

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

![](key.png)

- **来，打个招呼**

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

![](how-are-you.png)

### 2.3 让 DevChat 帮着选 web 框架

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

![](which.png)

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

### 2.4 让 DevChat 帮着写代码

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

![](ping1.png)

![](ping2.png)

少年跟着操作了一下：

1. **安装 Gin**

```bash
$ 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`。
>
> ```bash
> go mod init github.com/yourname/yourproject
> ```
>
> 这将会在当前目录下创建一个 go.mod 文件。
>
> 然后，你可以使用 go get 命令来获取 Gin 框架：
> 
> ```bash
> go get github.com/gin-gonic/gin
> ```
> 
> 这将会下载 Gin 框架，并更新你的 go.mod 和 go.sum 文件。
> 
> 现在，你可以开始编写你的 web 应用了。

少年对着操作了一下：

![](go-get.png)

很和谐，成功了。

2. **插入代码**

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

![](insert.gif)

3. **运行，测试**

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

![](curl.png)

跑通了，代码架子有了。

### 2.5 让 DevChat 帮着写 Dockerfile

写 Dockerfile 需要注意啥？

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

![](dockerfile.gif)

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

![](insert-dockerfile.png)

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

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

- **构建镜像**

![](docker-build.png)

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

![](docker-run.png)

### 2.6 让 DevChat 帮着封装 Helm Chart

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

> **DevChat**：要使用 Helm Chart 打包你的应用，你需要首先安装 Helm。然后，你可以按照以下步骤来创建和配置你的 Helm Chart：
>
> 1. 创建一个新的 Helm Chart：
> 
> ```bash
> helm create mychart
> ```
> 
> 这将在当前目录下创建一个名为 mychart 的新目录，其中包含了一个基本的 Helm Chart 结构。
> 
> 2. 修改 mychart/Chart.yaml 文件，更新 chart 的描述和版本信息。
> 3. 在 mychart/values.yaml 文件中，你需要配置你的应用的 Docker 镜像和端口。例如：
> 
> ```yaml
> image:
>   repository: golang-webapp
>   tag: latest
>   pullPolicy: IfNotPresent
> 
> service:
>   type: ClusterIP
>   port: 8080
> ```
> 
> 4. 在 mychart/templates/deployment.yaml 文件中，你需要确保你的应用的 Docker 镜像和端口被正确地使用。例如：
> 
> ```yaml
> spec:
>   containers:
>     - name: {{ .Chart.Name }}
>       image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
>       imagePullPolicy: {{ .Values.image.pullPolicy }}
>       ports:
>         - name: http
>           containerPort: 8080
>           protocol: TCP
> ```
> 
> 5. 最后，你可以使用以下命令来打包你的 Helm Chart：
> 
> ```bash
> helm package mychart
> ```
> 
> 这将创建一个名为 mychart-0.1.0.tgz 的文件，其中包含了你的 Helm Chart。你可以将这个文件部署到你的 Kubernetes 集群。
> 
> 注意：以上步骤假设你的 Docker 镜像已经被推送到一个可以访问的 Docker registry。如果你的 Docker 镜像仍然在你的本地机器上，你需要首先将它推送到 DockerHub 或其他 Docker registry。

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

1. **helm create**

![](helm-create.png)

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

2. **更新 values.yaml**

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

![](helm-values.gif)

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

```yaml
service:
  type: ClusterIP
  port: 8080
```

3. **更新 deployment.yaml**

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

![](http-get.png)

4. **helm package**

```bash
$ 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：
> 
> ```bash
> brew install minikube
> ```
> 
> 然后，你可以使用以下命令来启动一个 Minikube 集群：
> 
> ```bash
> minikube start --driver=docker
> ```
> 
> 这将使用 Docker 驱动来启动一个 Minikube 集群。如果你的本地机器上已经安装了 Docker，这是最简单的方式。
> 
> 接下来，你需要将你的 Docker 镜像加载到 Minikube 的 Docker daemon 中。你可以使用以下命令来做到这一点：
> 
> ```bash
> minikube image load golang-webapp:latest
> ```
>
> 现在，你可以使用 Helm 来部署你的应用。首先，你需要添加你的 Helm Chart 到本地的 Helm repository：
> 
> ```bash
> helm repo add local file://path/to/your/chart/directory
> ```
> 
> 然后，你可以使用以下命令来部署你的应用：
> 
> ```bash
> helm install myapp local/golang-webapp
> ```
> 
> 这将部署你的应用到 Minikube 集群。你可以使用以下命令来检查你的应用的状态：
> 
> ```bash
> kubectl get pods
> ```
> 
> 如果一切正常，你应该能看到你的应用正在运行。

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

1. **安装 minikube**

```bash
brew install minikube
```

2. **用 minikube 拉起一个默认 K8s 集群**

```bash
$ 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
```

3. **load 镜像到 minikube 环境**

```bash
minikube image load golang-webapp:latest
```

4. **部署 Helm Chart**

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

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

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

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

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

```bash
$ 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
```

5. **检查部署结果**

![](kg-pod.png)

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

### 2.8 让 DevChat 帮着写 Commit Message

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

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

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

![](git-add.gif)

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

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

![](commit-message.gif)

3. **提交 commit**

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

![](commit.png)

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

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

```bash
$ 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”，名称暂为“思码逸智能编程”