给VSCode插上一双AI的翅膀

2023-10-29 09:52
文章标签 ai vscode 插上 翅膀 一双

本文主要是介绍给VSCode插上一双AI的翅膀,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、安装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
  • 四、按照上述提示创建Vue3项目并打开项目
    • 4.1、左边区域是创建好的Vue3项目
    • 4.2、右侧区域展示DevChat
    • 4.3、打开终端运行项目(底部区域)
    • 4.4、在浏览器查看Vue3项目
  • 总结

前言

    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/jwv

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会给出我们答案,如下图:
在这里插入图片描述

四、按照上述提示创建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/
在这里插入图片描述

总结

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

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

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

这篇关于给VSCode插上一双AI的翅膀的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/299871

相关文章

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么?1、环境准备2、构建项目2.1、pom依赖2.2

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll

Spring AI Alibaba接入大模型时的依赖问题小结

《SpringAIAlibaba接入大模型时的依赖问题小结》文章介绍了如何在pom.xml文件中配置SpringAIAlibaba依赖,并提供了一个示例pom.xml文件,同时,建议将Maven仓... 目录(一)pom.XML文件:(二)application.yml配置文件(一)pom.xml文件:首

SpringBoot整合DeepSeek实现AI对话功能

《SpringBoot整合DeepSeek实现AI对话功能》本文介绍了如何在SpringBoot项目中整合DeepSeekAPI和本地私有化部署DeepSeekR1模型,通过SpringAI框架简化了... 目录Spring AI版本依赖整合DeepSeek API key整合本地化部署的DeepSeek

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

VScode连接远程Linux服务器环境配置图文教程

《VScode连接远程Linux服务器环境配置图文教程》:本文主要介绍如何安装和配置VSCode,包括安装步骤、环境配置(如汉化包、远程SSH连接)、语言包安装(如C/C++插件)等,文中给出了详... 目录一、安装vscode二、环境配置1.中文汉化包2.安装remote-ssh,用于远程连接2.1安装2

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》:本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件,将以下内

PyCharm接入DeepSeek实现AI编程的操作流程

《PyCharm接入DeepSeek实现AI编程的操作流程》DeepSeek是一家专注于人工智能技术研发的公司,致力于开发高性能、低成本的AI模型,接下来,我们把DeepSeek接入到PyCharm中... 目录引言效果演示创建API key在PyCharm中下载Continue插件配置Continue引言

Ubuntu系统怎么安装Warp? 新一代AI 终端神器安装使用方法

《Ubuntu系统怎么安装Warp?新一代AI终端神器安装使用方法》Warp是一款使用Rust开发的现代化AI终端工具,该怎么再Ubuntu系统中安装使用呢?下面我们就来看看详细教程... Warp Terminal 是一款使用 Rust 开发的现代化「AI 终端」工具。最初它只支持 MACOS,但在 20

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode(VSCode)中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境:详细教程1. 什么是 VSCode?2. 安装 VSCo