国产大模型之光DeepSeek发布后，大家在使用过程中发现它代码生成和理解的能力丝毫不逊色于 Claude 3.5 Sonnet （国外仅次于chatGPT的超强大模型，在编程领域的性能排行前列）。越来越多的人开始使用DeepSeek来编写代码，B站上使用DeepSeek做游戏，写网站的视频层出不穷，异常火爆！

然而大家在使用过程中发现，一直从对话框中粘贴复制代码耗时耗力，有没有能够解放我们双手的AI编程工具呢？
国内外目前已经发布了众多AI辅助编程的软件和插件，比较流行的国外软件有Cursor,WindSurf,Copilot， 国内软件有阿里巴巴通义灵码， 字节跳动新推出的Trae AI等，这些平台都极大的提升了开发体验。

然而对于个人开发者这些平台还是存在瓶颈，如：需要“梯子”使用，免费额度有限，价格偏高，需要订阅等让大多数人望而却步。难道我们个人开发者就没法用到AI编程了嘛？莫着急，本篇文章就手把手教你使用VS Code+DeepSeek免费玩转AI编程，让不会写代码的人也能感受到代码开发的魅力！

一、准备：软件准备

1. 下载Vs Code编程软件

VS Code 是微软开发的一款轻量级、跨平台的代码编辑器，支持多种编程语言，具备智能代码补全、调试、Git 集成、插件扩展等功能，适合高效开发。本篇文章我们就要结合Vs Code 和它的AI插件扩展 Cline, Continue来完成AI编程。

1. 访问官网下载软件（可选Windows, Linux, Mac系统，这里以windows为例), 下载网址： https://code.visualstudio.com/ 。
2. 双击下载好的 VSCodeUserSetup-x64.exe 文件，保持默认选项一直安装install即可。
3. 运行Vs Code，使用界面如下，Vs Code最强大的功能是插件扩展，可以通过下载所需插件将VS Code打造为任何编译器（可以使用你掌握的任何语言开发，不限于C， Java，Python等），下面通过一个简单例子感受Vs Code的强大魅力：
   （1） Vs Code刚打开是英文界面，很多小伙伴可能不习惯，对于这种情况我们只要安装中文扩展插件就可以了。
   
   （2） 点击下图红色框出的插件扩展市场按钮，搜索Chinese，选择第一个安装包，点击Install，下载好后右下角会有restart重启vs code的提示，点击change and restart 重启之后就会变成中文显示啦。
   
   
   

2. 接入DeepSeek API

1. 访问DeepSeek官网 https://www.deepseek.com/ ，点击API开放平台，注册平台账号
   

2. DeepSeek目前已经开放了tokens充值。如果大家不想花费也可以白嫖（国内很多大厂平台也接入了DeepSeek模型，感兴趣可以参考我的博文全网免费接入DeepSeek-R1平台清单

3. 点击左侧的API keys， 点击创建API Key, 一定要记住自己创建的API Key（以后配置要使用！！！）
   
   

二、配置：搭建人工智能代码助手（配置Cline和Continue插件）

1.设置Cline插件

首先简单介绍一下Cline插件：Cline是一款专为开发者设计的人工智能代码插件，内置Claude大模型的访问，也可以自行设置大模型，由大模型提供代码自动编写，错误检测、调试支持等功能，提升编程效率与代码质量。

下面就让我们在Vscode上配置Cline插件：

1. 打开Vs Code插件市场，下载Cline插件，点击安装。下载完成后左边栏会出现小机器人按钮
   
   

2. 点击小机器人图标，点击下方的Auto Approve：Read, Edit...字样，将所有选项都勾选，如下图所示：
   
   

3. 点击小机器人的图标，点击右上角的设置按钮，在API Provider中选择deepseek，将我们记住的DeepSeek的API Key填入对应框中，Model我们选择deepseek-chat，Custom Instructions中填入请用中文回答。
   

4. 简单测试一下deepseek-chat有没有设置成功，我们在Type a message中写入“你好”，如果收到Cline的回复，说明你的deepseek已经设置成功啦
   

2. 设置Continue插件

配置完Cline接下来我们配置Continue插件，Continue 是一款强大的 VS Code 插件，旨在通过集成人工智能助手来提升开发效率。Continue 可以提供智能补全、代码重构建议，以及与上下文紧密相关的代码生成功能。它支持自然语言输入，我们使用Continue来辅助Cline使用，利用Continue根据上下文自动补全代码并优化的特点进一步加快开发速度。

下面就让我们在vs code中安装Continue插件：

1. 同样的在Vs Code扩展市场中安装Continue，这一部分我就不再赘述，大家自行操作，下载好后会在小机器人图标下面生成Continue图标：
   
2. 点击Continue图标，点击模型下拉框，点击Add Chat model，并配置其中的模型为DeepSeek，同样的需要填入DeepSeek API Key，具体步骤如下：
   
3. 同样在配置好后我们进行测试，在对话界面选择DeepSeek Coder 并输入你好，看到下面给我们的回复，我们的Continue就配置成功啦
   
4. Continue主要的功能在于对代码的自动补全，改错和优化， 这里打开一个python文件为例, 下图的代码中有行python代码 print('a'+111) , 大家如果熟悉python的话一眼看出python中字符串和数字不可以相加拼接，我们可以利用Continue自动修改，首先拖动鼠标选中代码，然后点击鼠标右键，点击Continue，点击Fix，稍等片刻我们发现Continue自动给出了代码正确的修复方案，此时你可以选择接受或拒绝来修改代码，更多操作大家在实践中探索吧：
   

三、实战：Cline+Continue编写自己的个人网站！

搭好了DeepSeek+Vs code+Cline+Continue的组合后，大家是不是也迫不及待的想要试一试效果呢，实战篇就和大家一起使用以上组合搭建一个个人网站并利用github进行部署。

1. 利用deepseek生成网站描述提示词

要想让Cline自动生成好看的网站代码，我们一定要提供比较精确的提示词。那如何精确的描述我们的网站呢？不要慌，可以用DeepSeek生成我们的网站描述提示词。打开DeepSeek官网进入对话界面，输入“我想设计一个网页，好看一点的个人网站，上面展示自己的个人图片轮播，最下面还有微信公众号的链接，请你帮我设计一下，先不写代码，只是用文字分条将页面详细的设计出来”，DeepSeek会返回给我们结果：

2. 使用Cline生成网页代码

（1） 创建空文件夹web-station,使用vs code软件打开。
（2） 打开vs code, 点击左侧cline的小机器人图标，在Type a message... 框中输入“请帮我按如下要求编写网页：”并拼接第一步DeepSeek生成的提示词，敲击 enter 键后Cline会分析我们的需求，然后输出cline基本的设计计划，并询问对该计划有无需要调整的地方：


（3） 如果我们没有需要对计划调整的地方可以直接回复 没有需要调整的地方，请帮我生成代码 ，这时Cline会回复如下内容：

（4） 我们点击下方图中标出的plan/act按钮，将其切换到ACT, Cline会感知我们切换了按钮，并立刻帮我们生成代码。

（5） 神奇的事件发生了，Cline自动帮我们创建了文件夹，创建了一堆文件：index.html网页文件,style.css样式文件，script.js交互脚本文件，并向其中自动写入了代码，我们做到了一行代码没有书写就开始编写程序啦！我们可以自行查看Cline生成代码，同时Cline也提示我们还缺少图片文件，将图片文件添加到指定文件夹下后，我们输入: 图片资源文件已经添加完成

（6） Cline会自动检查我们的图片资源命名是否正确，是否放置到了指定位置等，只需稍等片刻

（7） Cline完成所有检查后会出现如下提示，这时候我们就点击 Run Command 按钮，见证奇迹的时刻！

（8） 下面就是我们网站的效果啦，和我们预期提示词中的功能几乎一样，只需简单几分钟，一个属于我们的个人网站就开发好了（特别注意： 如果开发过程中遇到一些问题不要慌张，我们可以直接把报错信息发送给Cline让它帮我们自动修复，也可以使用我们部署的Continue工具 Fix代码，问题很快解决~ ），大家也可以继续修改代码让网站更好看。怎么样，AI编程助手的能力是不是很强大！

3. 网站部署

下面我们介绍网站部署的部分，让更多人可以访问到我们的网站：

（1） 创建github账号，新建一个仓库，在仓库中直接把我们刚才的web-station 文件夹中内容传上去。目前国内网络导致大家有时候github都比较卡，大家没有梯子的可以在微软官方商店下载 Watt ToolKit 软件, 提供了github加速。

（2） 新建仓库时特别注意要选择Public, 不要选择private!不要选择private!不要选择private! 重要的事情说三遍

（3） 仓库新建完成后，点击uploading existing file, 上传我们本地的网站代码和资源文件，将所有的web-station文件夹下的所有文件拖到上传页面后，点击Commit Changes 上传。



（4） 上传完成后回到新建的仓库主页，点击Settings， 然后点击Pages，选择部署的分支 main，最后点击save按钮，参考下图：

（5） 点击save之后不断刷新页面（这一过程不要着急，可能要1-2分钟), 直到看到显示了你的网址，如下图圈出部分，点击 visit site, 就能看到我们的网站啦！大家可以把打开网址的链接分享给小伙伴，看看谁的网站最好看~

（6） 这里放一下我的 github项目地址: https://github.com/TangBaron/aiWeb , 生成的网站链接：https://tangbaron.github.io/aiWeb/ 和网站截图，感兴趣的小伙伴可以访问关注一下，撒娇打滚求star~~~

四、总结

以上就是我们分享的全部内容，大模型真正造福了我们开发者，即使你不会代码，也可以利用DeepSeek+Vs Code+Cline+Continue让你的想法变为现实！还不赶快动手操作起来吧~（更多精彩内容可关注微信公众号： 大模型真好玩， 会分享我工作学习中的大模型开发经验，基础知识和免费资料，让人工智能大模型技术真正给大家带来便利！）