Cline + DeepSeek：好用便宜的AI程序员搭配

Cline （原Claude Dev）一个可以使用你的命令行界面和编辑器的人工智能助手。

Cline 可以作为VSCode插件安装，搭建开发环境更加简便，下载地址：[Cline (prev. Claude Dev) - Visual Studio Marketplace](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dsaoudrizwan.claude-dev)，Cline 用来学习一门新语言或者新框架是非常有用的，他能快速帮你搭建起一个可用的demo，自动识别搭建过程中出现的错误并进行改进。

Cline 支持大量主流的大模型，由于支持OpenAI compatible API和Ollama，也就是说你基本可以使用绝大部分大模型帮助你完成任务，Cline 更推荐Claude 3.5 Sonnet，但是新版本使用了customized XML tags，使得其它大模型的兼容性变得更好。我也试用了一下，原来仅仅使用`claude-3-5-sonnet`和`gpt-4o-mini`时效果比较好，升级到Cline v2.0.0后，使用`DeepSeek`也能有很好的效果。

![374881793-63c49a34-d3f4-43ee-b975-9bebc1c24d88.png](https://doc.xiqi.site/media/202412/2024-12-04_134021_7327480.987104049810178.webp)

比较来说DeepSeek就比gpt-4o-mini和claude-3-5-sonnet便宜不少。尤其是使用了**缓存命中**后仅需0.1元/百万tokens（后面有结合案例的详细比较）

![image-20241010125055469.png](https://doc.xiqi.site/media/202412/2024-12-04_134020_1921000.2714303357783109.webp)

由于 VSCode v1.93 中新的 shell 集成更新，Cline 现在可以直接在你的终端中执行命令并接收输出。这样他可以帮助你执行各种命令（需要你确认），也可以获取命令执行后出现的错误，给你解决方案，这个功能在使用过程中感觉非常成熟，这对很多对环境搭建比较困惑的新手有很大帮助。当然有时候你如果能告诉他一些环境设定可能会使用的更加顺滑，比如我使用PowerShell作为终端，使用pnpm v8等等……

Cline 也支持一些多模态技术（取决你使用的模型，比如DeepSeek就不行），Cline 可以使用无头浏览器检查任何网站，例如 localhost，从而允许他捕获屏幕截图和控制台日志。这使他能够自主修复视觉错误和运行时问题，而无需手动操作和复制粘贴错误日志。

![374833069-50019dba-a63d-41f0-ab0f-fd35ebcdd4c5.png](https://doc.xiqi.site/media/202412/2024-12-04_134020_0700620.5169122247631093.webp)

当然个人使用过程中感觉这个功能还有很长的路要走。

## Cline配置

基本只需要配置很少得选项就能够运行

国内环境可以考虑使用 **DeepSeek**，Cline专门针对其做了测试，价格非常便宜。同时DeepSeek也是开源模型，如果机器性能不错，可以使用Ollama来跑

-   **API Provider**：OpenAl Compatible
-   **Base URL**：[api.deepseek.com](https://link.juejin.cn?target=https%3A%2F%2Fapi.deepseek.com)
-   **API Key**：自行申请
-   **Model ID**：deepseek-coder

**Custom Instructions**：这里可以追加一些prompts，比如我这里要求使用中文。

**Always allow read-only operations**：由于Cline需要频繁读取项目目录和文件，这些不勾选本选项时都要你授权，勾选后它就可以自己读取再进行下一步了，**强烈推荐勾选**

![image-20241010130303085.png](https://doc.xiqi.site/media/202412/2024-12-04_134020_7878600.03616285486248694.webp)

## Cline实战

### SpringBoot + Echart

```sql
生成一个折线图，后台用SpringBoot提供数据接口，前台用fetch+Echart实现
```

可以根据你的要求自动创建项目和文件列表，配置文件，根据终端反馈的错误给出解决方案，我用的是gpt-4o-mini，感觉也基本够用，当然比AI对话生成代码可能要贵一些。比如完成本任务，共耗费`Tokens:↑206,407 ↓3,634`，按照当前的gpt-4o-mini价格算约`US$0.033`

如下图，可以给你自动创建每一个文件（需要你确认保存），根据终端的反馈给出下一步的命令（需要你确认执行）

![image-20240919104214188.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c6ff5078a3e64ffda61764963b83397c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgbGdjNjUz:q75.awebp?rk3s=f64ab15b&x-expires=1733373896&x-signature=agMc7vyQ5NC48e%2B8cFhLk4kXydQ%3D)

![image-20240919104012974.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9e805e6e038242f285038fa9a08e72d7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgbGdjNjUz:q75.awebp?rk3s=f64ab15b&x-expires=1733373896&x-signature=MmIhvCk4jr9uhZVttop%2B%2BZw36ek%3D)

![image-20240919103623871.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b1d308f3681c4fde9e80ec1c6a78ae7c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgbGdjNjUz:q75.awebp?rk3s=f64ab15b&x-expires=1733373896&x-signature=MoDUnWzstrv9qzE%2FI%2F0QfSezE4Q%3D)

改用DeepSeek，可以看到使用Tokens差不多，但是由于DeepSeek输入Tokens大量命中缓存，实际用了￥0.04元

![image-20241010131348821.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1604ff49dc1d4177b2aca80d1c905251~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgbGdjNjUz:q75.awebp?rk3s=f64ab15b&x-expires=1733373896&x-signature=OMjZEMowU8Xk%2F%2BCbNSUetBQaw2Y%3D)

![image-20241010131411760.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/86f41616c88f44318dd65ff9dd269810~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgbGdjNjUz:q75.awebp?rk3s=f64ab15b&x-expires=1733373896&x-signature=8SNO87sfxpvgyP6FvAH0g68xamI%3D)

实际使用过程中，无论是使用gpt-4o-mini还是DeepSeek，使用过程中都很顺滑，成本上DeepSeek更有优势一些。

### vue3

再来看看vue3的经典案例任务管理，这里只用DeepSeek做了测试（因为比较便宜），最终花了￥0.07元

```javascript
使用vue3开发一个todo list，单页面应用，不需要跳转，数据存储使用localStorage，不要用vuex
```

初期由于Cline不知道终端类型，创建项目目录时反复尝试了几次（自动识别错误后分析重试），可以在题词中一开始告知使用的是PowerShell作为终端会更加顺利

中间追加了几次题词

```sh
追加checkbox表示完成状态
```

```sh
引入element plus美化界面
```

```sh
给完成追加中划线效果
```

```sh
界面汉化成中文，todoitem设计为组件
```

![image-20241010132244095.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7d754fd934454c089bc2e429ef22fb0d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgbGdjNjUz:q75.awebp?rk3s=f64ab15b&x-expires=1733373896&x-signature=HOs6gx5i6BawyHomf%2FZXitdASp4%3D)

![image-20241010132355534.png](https://doc.xiqi.site/media/202412/2024-12-04_134021_2625860.9309969967835539.webp)

整个过程也很顺滑，没有进行任何手动干预。