给VSCode插上一双AI的翅膀

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

文章目录

  • 前言
  • 一、安装DevChat
    • 1.1、访问地址
    • 1.2、注册
      • 1.3、在VSCode里安装DevChat插件
      • 1.3.1、未安装状态
      • 1.3.2、已安装状态
  • 二、设置Access Key
    • 2.1. 点击左下角管理（“齿轮”图标）—命令面板（Command Palette），如下图
    • 2.2、在弹出的命令面板中输入“devchat key”，点击如下命令
  • 三、使用DevChat
    • 3.1、 选中机器人标签
    • 3.2、创建新的主题
    • 3.3、创建Vue3项目的提示内容
      • 3.3.1、确保你已经安装了Node.js和npm
      • 3.3.2、使用npm全局安装Vue Cli
      • 3.3.3、使用Vue Cli创建一个Vue新项目
      • 3.3.4、在提示符下， 选择Vue3
  • 四、按照上述提示创建Vue3项目并打开项目
    • 4.1、左边区域是创建好的Vue3项目
    • 4.2、右侧区域展示DevChat
    • 4.3、打开终端运行项目（底部区域）
    • 4.4、在浏览器查看Vue3项目
  • 5、DevChat在项目开发过程中的应用
    • 5.1、添加到DevChat功能
  • 总结

前言

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/144940.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DNS域名解析服务

DNS域名解析服务

1.概述 1.1.产生原因 IP 地址:是互联网上计算机唯一的逻辑地址，通过IP 地址实现不同计算机之间的相互通信，每台联网计算机都需要通过I 地址来互相联系和分别，但由于P 地址是由一串容易混淆的数字串构成，人们很难记忆所有计算机的…
阅读更多...
【7】Spring Boot 3 集成组件：缓存组件 spring cache + spring data redis

【7】Spring Boot 3 集成组件：缓存组件 spring cache + spring data redis

目录 【7】Spring Boot 3 集成组件：缓存组件 spring cache spring data redis什么是缓存抽象声明式注解JSR-107对应SpEL上下文数据 引入依赖cache 支持的缓存类型缓存类型配置NONESIMPLEREDIS自定义配置 CAFFEINE Hazelcast...总结 个人主页: 【⭐️个人主页】 需要…
阅读更多...
企业邮箱认证指南：安全与高效的邮箱认证方法

企业邮箱认证指南：安全与高效的邮箱认证方法

企业邮箱是专门为企业提供的电子邮件服务，安全性和专业性更高。在开始使用企业邮箱之前，很多人会有一些问题，比如企业邮箱需要认证吗、如何开通企业邮箱，以及哪款企业邮箱好。 1、企业邮箱在使用前需要认证吗？ 答案是肯…
阅读更多...
flume异常关闭文件修复方法

flume异常关闭文件修复方法

​ flume在从kafka采集数据后，会将数据写入到hdfs文件中。在写入过程中，由于集群负载、资源或者网络原因会导致文件没有正常关闭,即文件表现为tmp格式，这种格式的文件从hdfs往hive分区load数据时，会导致数据无法查询问题。 flume写…
阅读更多...
golang学习笔记——指针

golang学习笔记——指针

文章目录 指针Go语言中的指针与C语言的区别Go语言中的指针—newGo语言中的指针—makenew与make的区别 参考资料 指针 Go语言中的指针与C语言的区别 区别于C/C中的指针&#xff0c;Go语言中的指针不能进行偏移和运算&#xff0c;是安全指针。 C语言 #include <stdio.h>…
阅读更多...
esp-01刷固件/下载软件到内部单片机的方法

esp-01刷固件/下载软件到内部单片机的方法

此文章为转载&#xff0c;非原创 一、准备 需要准备三个东西&#xff1a; 1.esp模块。ESP-01 和 ESP-01s 的引脚及 flash 容量基本完全兼容&#xff0c;只是内部硬件设计粗糙与否的区别&#xff0c;所以理论上都适用。 2.官方固件。此部分可以从安信可官方教程中下载&#xff0…
阅读更多...
WPF实现将鼠标悬浮在按钮上时弹出菜单

WPF实现将鼠标悬浮在按钮上时弹出菜单

在WPF 中&#xff0c;要实现当鼠标悬停在按钮上时显示菜单&#xff0c;并能够灵活设置菜单的位置&#xff08;如按钮的上方或下方&#xff09;&#xff0c;你可以使用 Popup 控件来创建自定义的弹出菜单。以下是如何通过 Popup 控件来实现这种功能的步骤&#xff1a; 1. 在 XA…
阅读更多...
MySQL库的操作『增删改查 ‖ 编码问题 ‖ 备份与恢复』

MySQL库的操作『增删改查 ‖ 编码问题 ‖ 备份与恢复』

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; MySQL 学习 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 &#x1f381;软件版本&#xff1a; MySQL 5.7.44 文章目录 1.创建数据库2.数据库中的编码问题2.1.字符集与校验集2.3.支持的字符…
阅读更多...
数据结构：AVLTree的插入和删除的实现

数据结构：AVLTree的插入和删除的实现

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》 文章目录 前言一、AVLTree二、AVLTree的插入插入新增节点调整平衡因子旋转左单旋(新增节点位于较高右子树的右侧)右单旋(新增节点位于较高左子树的左侧)右左双旋(新增节点在较高右子树的左子…
阅读更多...
AOP打印日志参数和耗时

AOP打印日志参数和耗时

使用场景&#xff1a; 可以通过 AOP , 以 控制层 controller 所在的包为切点&#xff0c; 在 controller 的方法前后打印日志&#xff0c;这样就能统计出接口的耗时&#xff0c;还能打印入参&#xff0c;出参&#xff0c;减少重复地打印日志。 如果想统计 dao 层的入参和耗时…
阅读更多...
Unity中Shader雾效的实现方法三

Unity中Shader雾效的实现方法三

文章目录 前言一、声明雾效所需要的内置变体二、在 v2f 中&#xff0c;定义 float4 worldPos &#xff1a;TEXCOORD1三、在顶点着色器中添加&#xff0c;会自动取o.worldPos.w裁剪空间下的坐标z值.在这里插入图片描述 四、在片元着色器&#xff0c;添加以下两句话1、UNITY_EXTR…
阅读更多...
CSS相关

CSS相关

【今日文章】&#xff1a;CSS相关 图片裁剪粘性布局针对像素点的操作 图片裁剪 clip-path有四种裁剪方式&#xff1a; 1.矩形 2.圆形 3.椭圆 4.多边形 1.建议写百分比 2.用在线生成工具来裁剪 关于裁剪常用的应用场景&#xff1a;图片一开始展示的是裁剪后的结果。当鼠标hover以…
阅读更多...
大数据基础设施搭建 - JDK

大数据基础设施搭建 - JDK

一、创建目录 需要在root账号下操作&#xff0c;因为/目录下只能用root账号创建目录 1.1 创建目录 [roothadoop102 ~]# mkdir /opt/software/ [roothadoop102 ~]# mkdir /opt/module/1.2 修改权限 修改module、software文件夹的所有者和所属组均为hadoop用户&#xff0c;远程使…
阅读更多...
MarkDown语法超详细讲解

MarkDown语法超详细讲解

MarkDown语法超详细讲解 Markdown 是一种轻量级的标记语言&#xff0c;它可以让你用简单的符号来添加格式元素&#xff0c;如标题、列表、粗体、斜体等&#xff0c;到纯文本文档中。Markdown 的语法简单易学&#xff0c;让你专注于内容而不是排版。Markdown 可以被转换为 HTML…
阅读更多...
三江城115m²3室2厅2卫，现代简约不单是居所更是对生活的向往。福州中宅装饰，福州装修

三江城115m²3室2厅2卫，现代简约不单是居所更是对生活的向往。福州中宅装饰，福州装修

【前言】 简洁有力&#xff0c;静默无声。 以简约精致的方式&#xff0c;展现现代都市生活&#xff1b; 经典不因潮流褪色&#xff0c;不为悦人只为悦己。 项目信息 项目名称 | 三江城 设计地址 | 福建福州 项目面积 | 115㎡ 项目户型 | 3室2厅 设计风格 | 现代简约 全…
阅读更多...
LeetCode（23）找出字符串中第一个匹配项的下标【数组/字符串】【简单】

LeetCode（23）找出字符串中第一个匹配项的下标【数组/字符串】【简单】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 找出字符串中第一个匹配项的下标 1.题目 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 hays…
阅读更多...
黑马程序员微服务第四天课程 分布式搜索引擎1

黑马程序员微服务第四天课程 分布式搜索引擎1

分布式搜索引擎01 – elasticsearch基础 0.学习目标 1.初识elasticsearch 1.1.了解ES 1.1.1.elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; …
阅读更多...
2016Outlook显示正在启动无法进入Outlook

2016Outlook显示正在启动无法进入Outlook

2016Outlook显示正在启动无法进入Outlook 故障现象&#xff1a; 因上次非正常关闭&#xff0c;导致Outlook启动时&#xff0c;一直处于启动界面&#xff0c;无法进入主界面正常工作 故障截图&#xff1a; 故障原因&#xff1a; 数据文件异常导致 解决方案&#xff1a; 1、关…
阅读更多...
YOLO改进系列之注意力机制（CoTAttention模型介绍）

YOLO改进系列之注意力机制（CoTAttention模型介绍）

简介 CoTAttention网络是一种用于多模态场景下的视觉问答&#xff08;Visual Question Answering&#xff0c;VQA&#xff09;任务的神经网络模型。它是在经典的注意力机制&#xff08;Attention Mechanism&#xff09;上进行了改进&#xff0c;能够自适应地对不同的视觉和语言…
阅读更多...
PHP实现在数据库百万条数据中随机获取几条记录的方法

PHP实现在数据库百万条数据中随机获取几条记录的方法

数据库中&#xff08;mysql&#xff09;随机获取几条数据很简单&#xff0c;但是如果一个表的数据基数很大&#xff0c;比如一千万&#xff0c;从一千万中随机产生10条数据&#xff0c;那就相当慢了&#xff0c;如果同时一百个人访问网站&#xff0c;处理这些个进程&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023