首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

零门槛!手把手教你用VS Code + DeepSeek 免费玩转AI编程!(5分钟编写部署个人网站)

  • 25-04-22 01:01
  • 2287
  • 14122
juejin.cn

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

2. 接入DeepSeek API

  1. 访问DeepSeek官网 www.deepseek.com/ ,点击API开放平台,注册平台账号 DeepSeek API接入.png
  2. DeepSeek目前已经开放了tokens充值,作为良心厂家,DeepSeek还是十分便宜的,每百万输入 tokens 2 元,每百万输出 tokens 8 元,一个月10元足够了。如果大家不想花费也可以白嫖(国内很多大厂平台也接入了DeepSeek模型,感兴趣可以参考我的博文全网免费接入DeepSeek-R1平台清单
  3. 点击左侧的API keys, 点击创建API Key, 一定要记住自己创建的API Key(以后配置要使用!!!)

image.png APIkey.png

二、配置:搭建人工智能代码助手(配置Cline和Continue插件)

1.设置Cline插件

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

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

  1. 打开Vs Code插件市场,下载Cline插件,点击安装。下载完成后左边栏会出现小机器人按钮 image.png image.png
  2. 点击小机器人图标,点击下方的Auto Approve:Read, Edit...字样,将所有选项都勾选,如下图所示: Cline auto.png Cline Auto1.png
  3. 点击小机器人的图标,点击右上角的设置按钮,在API Provider中选择deepseek,将我们记住的DeepSeek的API Key填入对应框中,Model我们选择deepseek-chat,Custom Instructions中填入请用中文回答。 ClineSet.png DeepSeekSet2.png
  4. 简单测试一下deepseek-chat有没有设置成功,我们在Type a message中写入“你好”,如果收到Cline的回复,说明你的deepseek已经设置成功啦 Cline测试.png

2. 设置Continue插件

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

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

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

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

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

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

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

2. 使用Cline生成网页代码

(1) 创建空文件夹web-station,使用vs code软件打开。
(2) 打开vs code, 点击左侧cline的小机器人图标,在Type a message... 框中输入“请帮我按如下要求编写网页:”并拼接第一步DeepSeek生成的提示词,敲击 enter 键后Cline会分析我们的需求,然后输出cline基本的设计计划,并询问对该计划有无需要调整的地方: web1.png web2.png (3) 如果我们没有需要对计划调整的地方可以直接回复 没有需要调整的地方,请帮我生成代码 ,这时Cline会回复如下内容: web3.png (4) 我们点击下方图中标出的plan/act按钮,将其切换到ACT, Cline会感知我们切换了按钮,并立刻帮我们生成代码。 web4.png (5) 神奇的事件发生了,Cline自动帮我们创建了文件夹,创建了一堆文件:index.html网页文件,style.css样式文件,script.js交互脚本文件,并向其中自动写入了代码,我们做到了一行代码没有书写就开始编写程序啦!我们可以自行查看Cline生成代码,同时Cline也提示我们还缺少图片文件,将图片文件添加到指定文件夹下后,我们输入: 图片资源文件已经添加完成 web5.png pic.png (6) Cline会自动检查我们的图片资源命名是否正确,是否放置到了指定位置等,只需稍等片刻 web6.png (7) Cline完成所有检查后会出现如下提示,这时候我们就点击 Run Command 按钮,见证奇迹的时刻! web7.png (8) 下面就是我们网站的效果啦,和我们预期提示词中的功能几乎一样,只需简单几分钟,一个属于我们的个人网站就开发好了(特别注意: 如果开发过程中遇到一些问题不要慌张,我们可以直接把报错信息发送给Cline让它帮我们自动修复,也可以使用我们部署的Continue工具 Fix代码,问题很快解决~ ),大家也可以继续修改代码让网站更好看。怎么样,AI编程助手的能力是不是很强大!

网站效果.png 网站效果2.png 网站效果3.png

3. 网站部署

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

(1)创建github账号,新建一个仓库,在仓库中直接把我们刚才的web-station 文件夹中内容传上去。目前国内网络导致大家有时候github都比较卡,大家没有梯子的可以在微软官方商店下载 Watt ToolKit 软件, 提供了github加速。 github1.png (2)新建仓库时特别注意要选择Public, 不要选择private!不要选择private!不要选择private! 重要的事情说三遍 github2.png (3)仓库新建完成后,点击uploading existing file, 上传我们本地的网站代码和资源文件,将所有的web-station文件夹下的所有文件拖到上传页面后,点击Commit Changes 上传。 github3.png github4.png github5.png (4)上传完成后回到新建的仓库主页,点击Settings, 然后点击Pages,选择部署的分支 main,最后点击save按钮,参考下图: github6.png (5)点击save之后不断刷新页面(这一过程不要着急,可能要1-2分钟), 直到看到显示了你的网址,如下图圈出部分,点击 visit site, 就能看到我们的网站啦!大家可以把打开网址的链接分享给小伙伴,看看谁的网站最好看~ github7.png (6)这里放一下我的 github项目地址: github.com/TangBaron/a… , 生成的网站链接:tangbaron.github.io/aiWeb/ 和网站截图,感兴趣的小伙伴可以访问关注一下,撒娇打滚求star~~~

四、总结

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

注:本文转载自juejin.cn的大模型真好玩的文章"https://juejin.cn/post/7475973902658027531"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

101
推荐
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top