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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mac 卸载第三方输入法

输入法设置里的移除,并不是真的卸载,点击还是能添加回来 在活动监视器里强制退出此输入法在访达界面使用快捷键 ShiftcommandG在弹出的对话框内输入以下路径(/资源库/Input Methods),再点击下面的前往找到你要卸载的输…

【深度神经网络(DNN)】实现车牌识别

文章目录 前言一、数据集介绍二、步骤1.导包2.参数配置3.数据处理4.模型定义5.模型训练6.模型预测 总结 前言 课内实践作业 车牌识别 一、数据集介绍 1.车牌识别数据集:VehicleLicense车牌识别数据集包含16151张单字符数据,所有的单字符均为严格切割且…

【网络协议】聊聊HTTPDNS如何工作的

传统 DNS 存在哪些问题? 域名缓存问题 我们知道CND会进行域名解析,但是由于本地会进行缓存对应的域名-ip地址,所以可能出现过期数据的情况。 域名转发问题 出口 NAT 问题 域名更新问题 解析延迟问题 因为在解析DNS的时候,需要进行…

MySQL:锁机制

目录 概述三种层级的锁锁相关的 SQLMyISAM引擎下的锁InnoDB引擎下的锁InnoDB下的表锁和行锁InnoDB下的共享锁和排他锁InnoDB下的意向锁InnoDB下的记录锁,间隙锁,临键锁记录锁(Record Locks)间隙锁(Gap Locks&#xff0…

IDEA Plugin插件开发相关踩坑

1 前言 最近在研究IDEA插件开发,踩了不少坑,特意在这里记录一下…… 2 Java相关类找不到 照着网上一些资料,想要实现代码审计自动提示功能,需要继承AbstractBaseJavaLocalInspectionTool 结果import一片爆红,找不到相…

从F5 BIG-IP RCE漏洞(CVE-2023-46747)来看请求走私的利用价值

0x01 前言 F5 BIG-IP广域流量管理器是一种网络流量管理设备,用于提升链路性能与可用性。F5在金融行业具有特别广泛的使用量,做过各大银行攻防演练的小伙伴对这个系统应该不会陌生。 最近爆出的CVE-2023-46747漏洞能达到远程RCE的效果,属于严重…

论文阅读——InternImage(cvpr2023)

arxiv:https://arxiv.org/abs/2211.05778 github:https://github.com/OpenGVLab/InternImage 一、介绍 大部分大模型都是基于transformer的,本文是一个基于CNN的视觉基础模型。使用可变性卷积deformable convolution作为核心操作&…

Python tkinter实现复刻Windows记事本UI和菜单的文本编辑器(一)

下一篇:Python tkinter实现复刻Windows记事本UI和菜单的文本编辑器(二)-CSDN博客 介绍: Windows操作系统中自带了一款记事本应用程序,通常用于记录文字信息,具有简单文本编辑功能。Windows的记事本可以新…

Go和JavaScript结合使用:抓取网页中的图像链接

前言 在当今数字化时代,数据是金钱的源泉,对于许多项目和应用程序来说,获取并利用互联网上的数据是至关重要的。其中之一的需求场景是从网页中抓取图片链接,这在各种项目中都有广泛应用,特别是在动漫类图片收集项目中…

漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题

漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的解…

【MATLAB源码-第70期】基于matlab的萤火虫算法(FA)的栅格路径规划,输出最短路径和适应度曲线。

操作环境: MATLAB 2022a 1、算法描述 萤火虫算法(Firefly Algorithm,FA)是由剑桥大学的Xin-She Yang在2008年提出的一种元启发式优化算法。该算法的灵感来源于萤火虫闪烁的行为特征,主要用于解决连续的优化问题。萤…

在 Gorm 中学习分页和排序

一个全面的指南,教您在 GORM 中实现分页和排序,以实现高效的数据检索和展示 高效的数据检索和展示是应用程序开发的关键方面。GORM,强大的 Go 对象关系映射库,为开发人员提供了强大的工具来实现这一目标。在本指南中,…

去中心化数据云项目Oort主网即将上线

备受期待的去中心化数据云项目Oort,今日已通过官方X账号官宣,将于纽约时间11月27日正式上线主网Olympus Protocol。届时,用户也能够通过Oort的Ale Wallet钱包和开发者API使用主网,并可通过OORT浏览器查询交易和合约,开…

代码随想录 Day41 动态规划09 LeetCode T121 买卖股票的最佳时机 T122 买卖股票的最佳时机II

前言 这两题看起来是不是有点眼熟,其实我们在贪心章节就已经写过了这两道题,当时我们用的是将利润分解,使得我们始终得到的是最大利润 假如第 0 天买入,第 3 天卖出,那么利润为:prices[3] - prices[0]。 相当于(prices[3] - prices[2]) (pri…

小程序 打开方式 页面效果 表单页面 点击跳到详情页 图标 获取后台数据 进行页面渲染

请求地址:geecg-uniapp 同源策略 数据请求 获取后台数据 ui库安装 冲突解决(3)-CSDN博客 一.uniapp转小程序 (1) 运行微信开发工具 (2) 配置id 然后运行 打开小程序 路径 E:\通\uniapp-jeecg\unpackage\dist\d…

MySQL -- mysql connect

MySQL – mysql connect 文章目录 MySQL -- mysql connect一、Connector/C 使用1.环境安装2.尝试链接mysql client 二、MySQL接口1.初始化2.链接数据库3.下发mysql命令4.获取执行结果5.关闭mysql链接6.在C语言中连接MySQL 三、MySQL图形化界面推荐 使用C接口库来进行连接 一、…

ppt聚光灯效果

1.放入三张图片内容或其他 2.全选复制成图片 3.设置黑色矩形,透明度30% 4.粘贴复制后的图片,制定图层 5.插入椭圆,先选中矩形,再选中椭圆,点击绘图工具,选择相交即可(关键)

python二维码识别系统的设计与实现

大家好我是玥沐春风,今天分享一个python二维码识别系统的设计与实现,项目源码以及部署相关请联系我,文末附上联系信息 。 项目简介: 本项目是在对二维码的应用服务场景进行了深入的分析,通过利用Python技术来开发一款…

警告:未配置spring boot 配置注解处理器

前言 这是我在这个网站整理的笔记,有错误的地方请指出,关注我,接下来还会持续更新。 作者:神的孩子都在歌唱 问题 我再使用ConfigurationProperties(prefix “redisson”)去加载配置文件中的属性的时候,发现idea有个警告 并且配…

uni-app基于vue实现商城小程序

目录 一、前言 二、功能效果图 1.首页 2.分类 ​3.活动 4.我的 ​5.商品详情 6.购物车 三、代码实现 1.项目结构截图 uni-app,Hbuilder 2.首页源码 3.数据模拟通讯 四、总结 一、前言 参考“网易严选”小程序 项目采用传统vue项目结构,即u…