给VSCode插上一双AI的翅膀

已于 2023-12-25 23:16:42 修改
阅读量10w+ 收藏 457
点赞数 116
文章标签： vscode 人工智能 ide ai DevChat 辅助编程 插件
于 2023-10-29 08:50:00 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/s445320/article/details/134096619
版权

#AI编程助手哪家好？DevChat“真”好用#

文章目录

推荐一个人工智能学习网站：AI 人工智能
在这里插入图片描述

前言

    DevChat是一款基于自然语言处理技术的聊天机器人，集成了GPT3.5、GPT4.0、XINGHUO-2、CLAUDE-2、LLAMA-2-13B-CHAT等大模型，它可以通过自然语言对话的方式与开发者进行交流，帮助开发者更高效地完成编程任务。

    现在流行的GPT、文心一言、讯飞对话机器人，都需要在编辑器之外的网页或APP另外开一个窗口，而DevChat是VSCode里的插件，可以一边写代码一边使用DevChat生成代码。

    使用DevChat也有一段时间了，也越发体会到AI的好处。对比人类的大脑，在精准海量的记忆方面，AI还是有很大优势。就拿创建Vue项目来说，如果是第一次创建Vue项目，通常需要打开搜索引擎去搜索Vue官网，然后找到Document，去搜寻关于创建Vue项目的文章，最后回到我们的编辑器，按照说明去完成上述步骤。如果是第二次创建Vue项目，我们通常会翻出上次的笔记或是重复搜索引擎那套流程。

    那么今天在这里给大家展示一下在VSCode里使用DevChat的便捷性，我们可以完全颠覆以往那些复杂的过程，轻轻松松喝几口咖啡的时间，DevChat就会给出我们创建Vue项目的步骤。

在这里插入图片描述

一、安装DevChat

    由于DevChat是一个VSCode插件，我们的目标是创建Vue项目，因此我们需要事先准备好一些东西：代码编辑器VSCode、node/npm环境。

1.1、访问地址

    https://meri.co/yxt

1.2、注册

    进入官网后，首先进行账号注册，步骤非常简单，就是邮箱加验证码（友情提示，163邮箱也是可行的）。
注册的时候会有一封邮件告知注册成功，里面包含了一个Access Key ，记住这个Access Key等会有大用。

1.3、在VSCode里安装DevChat插件

    在 VS Code 插件市场中搜索“devchat”，如下图，点击安装（或访问 Visual Studio Marketplace，点击 Install）。
在这里插入图片描述

1.3.1、未安装状态

    未安装状态下，DevChat会显示“安装”按钮。
在这里插入图片描述
在这里插入图片描述

1.3.2、已安装状态

    已安装状态下，DevChat会显示“卸载”按钮
在这里插入图片描述

二、设置Access Key

    把 邮件里的access key，完整复制粘贴到 VS Code 中，具体方法为：

2.1. 点击左下角管理（“齿轮”图标）—命令面板（Command Palette），如下图

在这里插入图片描述

2.2、在弹出的命令面板中输入“devchat key”，点击如下命令

     把邮箱里的Access Key输入到这里，按回车键确认。
在这里插入图片描述

三、使用DevChat

    使用DevChat，提问”创建一个Vue3项目”
    DevChat会给出我们答案，如下图：
在这里插入图片描述

3.1、 选中机器人标签

打开DevChat窗口， 选中机器人标签，可以有GPT3.5、GPT4.0、XINGHUO-2、CLAUDE-2、LLAMA-2-13B-CHAT等大模型的选项，这里我们选择GPT-4，尝试一下当前最先进的大模型。
在这里插入图片描述
在这里插入图片描述

3.2、创建新的主题

点击[new topic]，主题内容是：创建一个Vue3项目
可以创建多个Topic，Topic之间是数据隔离的（比如创建Java项目，生成跟当前主题不相关的其他代码等）
在这里插入图片描述

3.3、创建Vue3项目的提示内容

在这里插入图片描述

3.3.1、确保你已经安装了Node.js和npm

这里可以配合底部终端区域，检测node、npm是否已安装、配置环境。

3.3.2、使用npm全局安装Vue Cli

安装并配置好node、npm环境，就可以使用npm全局安装Vue Cli
命令：npm insattll -g @vue@cli

3.3.3、使用Vue Cli创建一个Vue新项目

使用Vue Cli创建一个Vue新项目，替换掉DevChat提示词里的项目名称
vue create vue_snake

3.3.4、在提示符下， 选择Vue3

在创建Vue项目中， 选择Vue3项目，按照提示一步一步完成Vue3项目创建

四、按照上述提示创建Vue3项目并打开项目

在这里插入图片描述

4.1、左边区域是创建好的Vue3项目

vue_snake，包含node_modules、public、src等目录，package.json、README.md、vue.config.js文件。

4.2、右侧区域展示DevChat

在Vue3项目打开之后，重复【第二节】的内容，并设置展示在右边区域。
这样我们可以一边编写项目代码， 一边可以同DevChat聊天机器人互动。

4.3、打开终端运行项目（底部区域）

输入：npm run serve

项目启动成功之后会提示：

App running at:

  • Local: http://localhost:8080/
  • Network: http://192.168.1.105:8080/

4.4、在浏览器查看Vue3项目

http://localhost:8080/
在这里插入图片描述

5、DevChat在项目开发过程中的应用

5.1、添加到DevChat功能

如果我们在编辑器中有部分代码有疑惑，可以右键选择Add to AddChat，然后在右侧对话框输入我们的问题。比如，编辑器中我对下面的代码有疑惑，然后询问DevChat帮我解答疑惑。
在这里插入图片描述
可以看到当点击Add to AddChat后，左侧输入框就多个图标内容，主要记录的是你的操作。
DevChat这种操作就特别的方便，不需要我们复制内容到Gpt、文心一言等工具里， 在VSCode里就可以边写项目代码边使用AI答疑。

总结

     在当今的软件开发领域，我们经常面临一些复杂的业务需求和非业务层面的代码问题。这些问题不仅耗费我们的时间和精力，而且可能阻碍我们专注于解决真正的业务逻辑。这时，一款优秀的工具——DevChat，便能够发挥出其强大的作用。

     DevChat是一款基于自然语言处理技术的聊天机器人，可以通过与开发者的对话，理解并执行开发者的编程需求。无论是解决复杂的业务问题，还是优化代码，它都能为我们提供极大的帮助。在开发过程中，冗余代码或欠优化代码是常见的问题。这些问题不仅影响代码的质量，还可能影响软件运行的效率。此时，我们可以将这些代码复制到DevChat中，让它快速给出解决方案。
     更值得一提的是，DevChat无需任何科技支持即可直接体验AI的效果。在开发过程中，由于网络或其他原因，我们可能无法使用科技。而DevChat的优点在于，它无需科技支持，响应速度快，让我们随时随地都能享受到AI的便利。

     综上所述，DevChat的引入不仅可以提高我们的工作效率，还能提升我们的代码质量。对于开发者来说，它是一款不可或缺的工具。推荐大家在开发中尝试使用，相信你一定会爱上它的。

【AI应用】在VSCode中集成AI编程 ------CodeGeeX智能编程助手
AnChenliang_1002的博客
12-13 4184
CodeGeeX是一款基于大模型的全能的智能编程助手。它可以实现代码的生成与补全、自动添加注释、代码翻译以及智能问答等功能，能够帮助开发者显著提高工作效率。CodeGeeX支持主流的编程语言，并适配多种主流IDE。CodeGeeX的功能：本文以VSCode中安装使用CodeGeeX插件为例，介绍CodeGeeX的使用方法；领略一下AI的强大；打开VSCode，在扩展中搜索CodeGeeX，点击安装即可，如下图所示： 安装成功后如下图所示： 在左侧就可以看到这个插件了；点击接受即可；然后长按下图图标，拖动到最
【实战篇】VS Code 集成主流 AI 插件的方法实战
02-07 1324
通过上面的步骤，咱们就成功地在 VS Code 里集成了几款主流的 AI 插件。这些插件各有各的优势，在你写代码的过程中能提供不同类型的帮助。当然，AI 插件虽然强大，但也不能完全依赖它们，还是得自己不断学习和提升编程能力。大伙在集成插件的过程中有啥问题，或者有什么使用心得，都欢迎在评论区留言交流，咱们一起玩转 VS Code 和 AI 插件！
1-CHATGPR插件-智能代码编写工具
wtt234的专栏
08-28 583
编程的智能助手，已经是当前必会的内容了，有效提升代码的编写速度，也改变了自学代码的方式，常用的工具如下，大家可根据实际情况进行使用。
让你工作效率起飞的 5 个 VSCode AI智能插件
fengshi_fengshi的专栏
10-15 4万+
本文介绍五款基于深度学习的智能代码补全工具，通过分析上下文，提供精准的代码建议，帮助开发者编码过程更加流畅和高效，直接让你的工作效率起飞！
VSCode中的AI工具
专注于编程智能体和AI原生开发领域的分享
12-21 4972
GitHub Copilot扩展是一个AI配对程序员工具，可以帮助您更快，更智能地编写代码。你可以使用VS Code中的Copilot扩展来生成代码，从它生成的代码中学习，甚至配置你的编辑器。
VSCode神仙插件——Codeium (AI编程助手)
ly_twt的博客
07-07 1万+
但是通过类型注解，你可以在代码中添加类型信息，以帮助开发者理解代码的意图，并通过类型检查工具（如mypy）来确保代码的类型安全。安装过程中会让你登录Codeium账户，可以通过Google账户登录，或者可以注册一个Codeium账户（如果没有弹出让你登录账户的界面，可以等安装结束后在右下角找到登录的地方）在Python中，要使代码具有强类型，你需要确保所有变量都有明确定义的类型，并且这些类型在使用过程中不会改变。这样的函数就是强类型的，因为所有的变量类型都是明确且不会改变的。，它们都被指定为整数类型 (
vscode+编程AI配置、使用说明
mahuifa的博客
12-22 7418
vscode中常用的、免费的、功能强大的编程AI配置使用说明
探索VSCode新宠：AI小助手，让你编程如虎添翼！
m0_51160509的博客
01-04 2556
在编程世界里，有一款令人兴奋的插件名为DevChat，它是程序员们最好的秘密武器！这款插件集成了多个超强大的模型，如GPT-4、GPT4.0、XINGHUO-2、CLAUDE-2、LLAMA-2-13B-CHAT等，它们都是顶尖的自然语言处理模型。DevChat可以通过与我们自然对话的方式，助力我们更高效地完成编程任务。使用DevChat就如同与一个聪明又幽默的机器人交谈。
vscode copilot 如何去掉提示建议
最新发布
04-28
好的，我现在需要帮助用户解决在VSCode中禁用Copilot代码提示和建议的问题。首先，我得回忆一下用户提供的引用内容，特别是引用3，因为用户明确提到了关闭Copilot的方法。用户之前的问题可能已经涉及了如何关闭，但...
[LLM]一文学会如何构建属于私有Code Pilot
yXIAOyu_的博客
07-30 391
本文通过介绍使用Tabby插件或者Llama.cpp构建本地Code Pilot，实际测下来速度不算太慢，还能接受。但毕竟模型较小，本地算力也不足，准确率不高，写写Python还行，写CPP感觉就是一坨翔。最后，如果对速度和准确率不满，可以考虑接入云端模型DeepSeek之类的专为编码训练的模型。
AIGC：数字化转型的“智”胜法宝
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-14 1064
AIGC作为企业数字化转型的得力助手，正不断拓宽商业边界，激发无限可能。但其潜能远不止于此，从内容创作到决策支持，从产品创新到服务优化，每一步都蕴含着变革的力量。我们不禁思考，AIGC的下一个奇迹将在哪里绽放？它又将如何重塑我们的工作与生活？欢迎在评论区分享您的见解，让我们共同预见智能时代的璀璨未来。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
LORA：Stable Diffusion中的时间旅者，解开长期依赖的谜题 ?????
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-16 734
LORA模型在Stable Diffusion中的应用，展现了AI技术在处理长期依赖问题上的智慧与潜力。这不仅是一次技术的革新，更是对未来创意表达可能性的探索。我们期待每一位AI旅者都能在这片星辰大海中，发现属于自己的宝藏，也许在下一次的时空穿梭中，你就是那个解密长期依赖谜题的英雄。现在，轮到你在评论区分享你的想法或经验了：在你的项目中，LORA或者其他技术是如何帮助你克服长期依赖问题的？又或者，你对未来的LORA有何期待与想象？让我们共同绘制AI技术的未来蓝图。
VSCode中6个AI顶级插件
极道Jdon的技术博客
03-29 1万+
借助这些以 AI 为中心的扩展，您可以利用强大的人工智能的转换能力来提升 Visual Studio Code 中的编码体验。利用强大的人工智能拥抱编码的未来，将开发工作流程的生产力和效率提升到新的水平。Codemium 具有支持多种编程语言和框架的强大 AI 功能，可适应您的编码风格和偏好，巩固其作为开发人员不可或缺的工具的地位。成为您编码中的 AI 副驾驶，根据上下文和编码模式为您的下一行代码提供强大的 AI 驱动预测。将 BlackBox 与 AI 无缝集成到您现有的工作流程中，以增强您的编码体验。
Vscode的AI插件 —— Cline
专注于硬件开发，嵌入式研发，前后端数据技术，3D打印技术剖析。
01-28 7651
vscode的一款AI辅助吃插件，主要用来辅助创建和编辑文件，探索大型项目，使用浏览器并执行终端命令（需要多个tokens），可以使用模型上下文协议（MCP）来创建新工具并扩展自己(比较慢)。支持多个AI的API接入，比如Chatgpt，Deepseek，Claude 3.5 Sonnet等。
【完全免费】VS Code 最好用的 12 款 AI 代码编码插件！！！
cloud_studio的博客
08-20 4万+
腾讯云开发者AI产品服务企业、个人以及学生开发者，提供完备的工具组合：- 腾讯云AI代码助手基于混元大模型， 基于体验极致的技术对话与代码生成能力，缩短学习路径、将开发提效增质；- CloudStudio 顺应人工智能教育潮流，为编程教学、人工智能实训、模型开发与推理提供便利；进入官网点几在线体验即可立即使用云端IDE+AI代码助手- 如何通过AI代码助手快速理解代码、生成代码并完成编译，从而大幅缩开发时间、降低编码难度；
原地起飞！VS Code 最好用的 10 款 AI 插件
热门推荐
codingpy的博客
12-07 6万+
你好，我是 EarlGrey，喜欢翻译点东西，偶尔写写代码。点击下方卡片关注我，一起向上进击，提升自我。后台回复关键词“电子书”，送你一份我收藏的电子书合集。开发人员的工具箱每年都在增加。最近，AI 工具受到热捧，质量和数量都在不断提高。今天，我将为大家分享 10 款 AI 驱动的 VS Code 插件，合理运用这些插件，或许能将你的工作效率提升十倍。那么，让我们直接开始吧！1. GitHub C...
找到一个VScode上帮助你写代码的ai
2401_83828595的博客
08-15 1052
通过使用VScode上的AI插件，你可以显著提高你的开发效率。如果你是一个程序员，不妨尝试一下这个插件，相信它会给你带来很多便利。
AI助力，从零基础开发一个vscode插件
CatchLight的博客
03-27 1536
在日常的代码开发中，总会遇到很多很小的知识点，想用却无从记起。尤其是在日常的前端开发，想要添加一个自己想要的css样式，却又想不起属性名，然后再css网站和笔记中搜索。当时想，如果能在IDE中内嵌一个AI编程助手就好了。后来GitHub推出了Copilot，再后来腾讯云基于混元大模型，推出了腾讯云AI代码助手。在惊喜之余，更多的是想要体验一下腾讯云AI代码助手的功能。最后就是在package.json中声明命令，并在中将其快捷键定义为。
VS Code 与AI编程助手
q45364926的博客
12-05 4316
Fitten Code 能够根据您的代码自动生成相关注释，通过分析您的代码逻辑和结构，为您的代码提供清晰易懂的解释和文档，不仅提高代码的可读性，还方便其他开发人员理解和使用您的代码。Fitten Code 能够根据您的代码自动生成相关注释，通过分析您的代码逻辑和结构，为您的代码提供清晰易懂的解释和文档，不仅提高代码的可读性，还方便其他开发人员理解和使用您的代码。（1）选中需要进行翻译的代码段，右键选择"Fitten Code – 重构选择代码"，然后在输入框中输入需求即可完成转换。有以下两种方法可以实现。
VSCode ai工具
03-25
<think>嗯，用户想了解或安装VSCode中的AI相关工具，特别是扩展。首先，我需要回忆一下VSCode有哪些常用的AI工具扩展。记得之前有看过关于IntelliCode的引用，比如引用[1]提到的Visual Studio Expt Team的IntelliCode，可以提供AI智能补全，比Jedi强。这个应该是微软官方的，可能用户需要优先推荐。另外，可能还有其他AI相关的扩展，比如GitHub Copilot，虽然用户没有直接提到，但这也是常见的AI编程辅助工具。 然后，用户的问题分为两部分：了解和安装。所以回答的结构应该先介绍常用的AI工具，再给出安装步骤。根据引用[2]，VSCode通过扩展机制增强功能，所以安装扩展的方法一般是打开Extensions视图，搜索名称安装。需要具体步骤，比如快捷键Ctrl+Shift+X或者通过侧边栏图标进入。 接下来要确认每个推荐的扩展是否有对应的引用支持。比如IntelliCode在引用[1]中提到，是必要的。GitHub Copilot虽然没有直接引用，但属于常见的AI工具，可能用户会需要。另外，可能还有其他的如Tabnine或Kite，但需要确保这些是否在用户的引用中有相关支持，但用户的引用中没有提到这些，可能需要避免推荐，或者作为补充提到，但主要根据现有引用。 安装步骤部分，引用[4]提到VSCode导入项目后自动配置，可能和扩展安装后的配置有关，但安装过程本身比较简单，用户可能只需要知道如何搜索和安装。此外，引用[3]列出了一些必要插件，但主要是针对C/C++开发的，可能与AI无关，所以可能不需要涉及。 然后需要考虑用户可能遇到的问题，比如是否需要登录账户，特别是Copilot需要GitHub账号。另外，IntelliCode是否需要配置，或者是否免费。比如，IntelliCode的基本功能是免费的，而Copilot可能需要订阅。这些信息对用户来说很重要，应该在回答中提到。 另外，用户可能需要知道这些工具的具体功能，比如代码补全、生成建议、代码解释等，所以需要简要说明每个扩展的主要功能，帮助用户决定是否安装。 最后，生成相关问题，可能涉及如何配置这些工具，或者与其他工具的比较，比如和Jedi的性能对比，或者使用场景等。根据引用[1]，IntelliCode比Jedi强，可以作为一个问题的基础。 总结回答结构：先介绍主要工具（IntelliCode和Copilot），然后安装步骤，注意事项，最后相关问题。需要确保每个部分引用正确的来源，比如引用[1]和[2]来支持IntelliCode和扩展机制。</think>### VSCode中的AI相关工具指南 #### 一、常用AI工具扩展推荐 1. **IntelliCode**（官方AI辅助工具） - 功能：基于上下文提供智能代码补全建议，支持Python、Java、JavaScript等语言。例如输入`for i in range(`时，自动补全完整循环结构[^1]。 - 特点：通过机器学习模型分析开源项目代码模式，提供更精准的补全建议[^1]。 2. **GitHub Copilot**（由OpenAI提供支持） - 功能：根据注释或函数名生成完整代码块，支持多种语言。例如输入注释`// 计算斐波那契数列`，可自动生成对应函数代码。 - 优势：适合快速原型开发或学习新语言语法。 3. **CodeGPT**（集成GPT模型） - 功能：通过自然语言指令生成代码或解释代码逻辑。例如输入`解释这段快速排序的Python代码`，会返回逐行注释说明。 --- #### 二、安装步骤 1. **IntelliCode安装** - 打开VSCode，按`Ctrl+Shift+X`进入扩展视图。 - 搜索`IntelliCode`，选择微软官方发布的扩展，点击安装[^1]。 - 安装后重启VSCode，在编写代码时会自动激活智能补全。 2. **GitHub Copilot安装** - 搜索扩展`GitHub Copilot`并安装。 - 登录GitHub账号（需订阅Copilot服务）。 - 在代码文件中输入注释或函数名，按`Ctrl+Enter`查看建议。 --- #### 三、注意事项 - **网络要求**：AI工具通常依赖云端模型，需稳定网络连接。 - **隐私安全**：Copilot等工具可能将代码片段发送到服务器处理，企业开发需注意合规性[^2]。 - **性能优化**：若出现延迟，可在设置中关闭实时建议（修改`editor.suggest.snippetsPreventQuickSuggestions`）。 ---
评论 56
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青花锁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值