DevChat:VSCode中的AI黑马

这篇具有很好参考价值的文章主要介绍了DevChat:VSCode中的AI黑马。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

前言

编程对于很多人来说,可能是一件复杂且耗时的事情。在结合当下各类AI产品层出不穷的情况下,我是有在认真的去拥抱AI来结合我们的工作,帮助我们的工作提升效率,尝试过我们的官方G P T,以及各类国产AI产品,其实讲实话在编程方面还是有点繁琐,毕竟想要借助AI需要从我们的代码屏幕中切换到AI,帮我们生成部分代码复制后在嵌入我们的项目中,来回切屏的时间消耗当然问题不大,但是更重要的是思路会受到干扰,作为前端人的我们常用编辑器就是VSCode,所以后面也寻找并尝试集成在编辑器中的一些产品,讲实话省去切屏的步骤思路是不会受到干扰,但是整体的生成结果总是不尽人意,不过最近发现的DevChat算得上是我目前体验下来后觉得非常赞的一款产品;

DevChat做最务实好用的智能编程工具,不做AI试验品,前面这句话呢不是我说的,是DevChat自己说的,不过整体体验下来,我是比较认可他的这句宣传标语的,DevChat的魅力,首先来自于它的全面性。代码补全、语法检查、智能推荐,这些原本需要耗时耗力的任务,现在只需一键即可完成。而这一切,都得益于DevChat背后强大的AI算法。但DevChat不仅仅满足于此。它的真正价值,在于对用户体验的极致追求。无论是界面设计还是操作流程,DevChat都展现出了极高的水准。每一个细节,都经过了精心打磨,确保用户能够享受到最流畅、最便捷的体验。而对于那些对技术有着极高要求的开发者来说,DevChat背后的技术原理更是充满了魅力。机器学习、自然语言处理…这些前沿的技术,都被DevChat完美地融入到了日常的编程中。

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

与其他同类产品相比,DevChat的优势更为明显。不仅功能更为强大,更重要的是,它真正做到了与用户的心灵沟通。每一次更新、每一次优化,都是为了更好地满足用户的需求。总的来说,DevChat不仅是一款插件,更是一种编程的革新。它让编程变得更加智能,也更加人性。如果你还在为编程的效率而烦恼,那么不妨试试DevChat,它或许会给你带来意想不到的惊喜。下面我就来带大家感受一下这款AI工具DevChat https://meri.co/kue

安装

我们访问上面的官方地址后首先进行个注册,注册的时候非常简单,就是邮箱加验证码,那么注册的时候会有一封邮件告知注册成功,里面包含了一个Access Key 的内容,这个内容我们下面会用到;然后回到官方后右上角有一个安装教程,里面讲解的比较详细,当然考虑大家看本篇文章的连贯性,我就也把步骤罗列一下:

安装依赖软件

这个几乎我们所有的程序员都是不需要的,如果你打开终端运行 git --version 返回版本号表明无需操作本步骤,如果你确实没有返回版本号,那你就参考 https://git-scm.com/book/en/v2/Getting-Started-Installing-Git 操作。完成安装于行上面命令出现版本号即可;

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

安装插件

打开咱们前端的趁手工具 VSCode,插件市场中搜索“devchat”,如下图,点击安装即可;

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

设置key

点击左下角的设置,选择命令面板/Command Palette,在弹出的命令面板中输入“devchat key”,点击如下命令

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

在最开始的时候跟大家提到过,我们注册成功邮箱收到邮件,其中包含了 Access Key 我们拿出来在弹窗中输入按下回车即可;

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

然后我们在插件中输入任意内容,测试下,正常回答就说明我们是ok了;DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

当然我们这款插件可选择的AI大模型还是比较齐全的;可以根据自己需求来进行切换

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

插件体验

我们先来小小的尝试一下,请帮我写一个js方法,要求传入一个树形结构的数组,和一个id,这个方法就可以给我返回匹配的ID所在层级和name值

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

function findNode(tree, id) {
  let result = {};

  // 递归遍历树形结构的数组
  function traverse(nodes, level) {
    for (let node of nodes) {
      if (node.id === id) { // 匹配id
        result = { level, name: node.name };
        return;
      }
      if (node.children) { // 继续遍历子节点
        traverse(node.children, level + 1);
      }
    }
  }

  traverse(tree, 0); // 从根节点开始遍历

  return result;
}

我们可以看到他生成的代码;相对而言很精准的能够知道我想要的是什么,我们这款插件每次生成后会有一个按钮 insertCode,他可以将生成的内容直接push到我们的代码中的光标位置,非常的丝滑跟方便,那我让他帮我生成数据来验证一下吧!

function findNode(tree, id) {
  let result = {};

  // 递归遍历树形结构的数组
  function traverse(nodes, level) {
    for (let node of nodes) {
      if (node.id === id) { // 匹配id
        result = { level, name: node.name };
        return;
      }
      if (node.children) { // 继续遍历子节点
        traverse(node.children, level + 1);
      }
    }
  }

  traverse(tree, 0); // 从根节点开始遍历

  return result;
}

const tree = [
  {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 2',
        children: []
      },
      {
        id: 3,
        name: 'Node 3',
        children: [
          {
            id: 4,
            name: 'Node 4',
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 5,
    name: 'Node 5',
    children: []
  }
];

const id = 4;
const result = findNode(tree, id);
console.log(result); // 输出: { level: 2, name: 'Node 4' }

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

另外的一点其实一个是我们会经常通过AI产品帮助我们去生成一些代码片段,那在我们日常的开发过程中其实我们也会遇到一些代码理解上的需求,比如一些源码或者大佬写的代码不是很好理解我们也可以借助插件来帮我们进行阅读或者是对一些冗余代码低质量代码进行优化;

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划
比如我们上面的这一段开发代码中我们进行选中=》右键-Add to DevChat,然后就可以基于这段代码向GPT提问;来帮我们进行理解或者是我们让他对代码进行优化等等;

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

对于AI产品来说,能够一次性能够生成比较精准的代码还是有一定挑战的,同时能够跟我们的编辑器做到这么高的融合程度真的很值得推荐;我们在来提升一下难度让他写一段贪吃蛇试试看;

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

<!DOCTYPE html>
<html>
<head>
<style>
    #game-board {
        position: relative;
        height: 300px;
        width: 300px;
        border: 1px solid black;
    }
    .dot {
        position: absolute;
        height: 20px;
        width: 20px;
        background: #000;
    }
    #fruit {
        position: absolute;
        height: 20px;
        width: 20px;
        background: #f00;
    }
</style>
</head>
<body>
<div id="game-board"></div>
<script>
    var dotSize = 20;
    var gameBoardSize = 300;
    var direction = 'Right';
    var snake = [{ top: 0, left: 0}];
    var fruit = null;

    function updateGameBoard() {
        var gameBoard = document.getElementById('game-board');

        // Clear board
        while (gameBoard.firstChild) {
            gameBoard.firstChild.remove();
        }

        // Draw snake
        snake.forEach(function(dot) {
            var dotEl = document.createElement('div');
            dotEl.classList.add('dot');
            dotEl.style.top = `${dot.top}px`;
            dotEl.style.left = `${dot.left}px`;
            gameBoard.appendChild(dotEl);
        });

        // Draw fruit
        if (fruit == null) {
            // No fruit - create one
            fruit = {
                top: Math.floor(Math.random() * gameBoardSize / dotSize) * dotSize,
                left: Math.floor(Math.random() * gameBoardSize / dotSize) * dotSize,
            };
        }
        var fruitEl = document.createElement('div');
        fruitEl.id = 'fruit';
        fruitEl.style.top = `${fruit.top}px`;
        fruitEl.style.left = `${fruit.left}px`;
        gameBoard.appendChild(fruitEl);
    }

    function updateGame() {
        var head = Object.assign({}, snake[0]); // Start with current head
        switch (direction) {
            case 'Up': head.top -= dotSize; break;
            case 'Down': head.top += dotSize; break;
            case 'Left': head.left -= dotSize; break;
            case 'Right': head.left += dotSize; break;
        }

        // Game over
        if (
            head.top < 0 || head.top === gameBoardSize ||
            head.left < 0 || head.left === gameBoardSize ||
            snake.find(function(dot) { return dot.top === head.top && dot.left === head.left })
        ) {
            snake = [{ top: 0, left: 0 }];
            direction = 'Right';
            fruit = null;
            return;
        }

        // Eating fruit
        if (fruit && fruit.top === head.top && fruit.left === head.left) {
            fruit = null; // Eat the fruit
        } else {
            snake.pop(); // Not eating - need to remove tail
        }

        snake.unshift(head);
    }

    window.setInterval(function() {
        updateGame();
        updateGameBoard();
        }, 200);

    window.onkeydown = function(e) {
        switch (e.key) {
            case 'ArrowUp': direction = 'Up'; break;
            case 'ArrowDown': direction = 'Down'; break;
            case 'ArrowLeft': direction = 'Left'; break;
            case 'ArrowRight': direction = 'Right'; break;
        }
    };
</script>

</body>
</html>

DevChat:VSCode中的AI黑马,前端入门之旅,vscode,人工智能,产品运营,原力计划

写在最后

虽然会有一些小的问题但是整体上的思路很赞,当然这种尝试我也只是想看看复杂情况下他的效果,真实不错,其实我们在日常的开发中,经常会有一些非业务层面的代码量,那么能够让我们的DevChat去帮我们搞定,对我们来讲就会节省时间去处理业务逻辑,从而就会提升我们的工作效率;在开发工程中我们也会遇到一些冗余代码或者是欠优化代码,其实我们都可以之际复制到左边让DevChat来帮我们搞定;很大的优势也在于它是真的不需要科技就可以直接体验AI的效果,因为我们很多时候其实在开发过程中的网络问题是不支持我们运用科技的,但是这个差价无需科技,而且响应速度很快的;推荐搭建使用!DevChat https://meri.co/jwv文章来源地址https://www.toymoban.com/news/detail-715411.html

到了这里,关于DevChat:VSCode中的AI黑马的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端基础从头学——VsCode使用教程+html基础(入门篇)

    作者简介:hello!大家好,初学前端知识,请多多指教。 希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~ ———————————————————————————— 刚接触前端,零基础小白,从头开始学起,请大家多多指

    2024年01月18日
    浏览(50)
  • 【前端】vscode前端插件笔记

    前段vscode好用插件笔记 HTML Snippets Path Intellisense Auto Rename Tag Bracket Pair Colorizer 中文包关键步骤:control+shift+然后display language切换即可 open in browser Live Server 实时效果显示 JS-CSS-HTML Formatter保存后格式自动缩进调整格式 CSS Peek 定义跳转 JavaScript (ES6) code snippets Vetur ES7 React/Redux/ A

    2024年02月11日
    浏览(49)
  • Devchat-AI 编程助手:Devchat-AI 尝鲜测评+场景实践

    本心、输入输出、结果 编辑:简简单单 Online zuozuo 地址:https://blog.csdn.net/qq_15071263 如果觉得本文对你有帮助,欢迎点赞、收藏、评论 DevChat 团队想要使用 AI 辅助写代码的时候,国内用户也能免短信注册无障碍使用,于是开源开发了 DevChat VSCode 插件 DevChat 简介 DevChat 是什么

    2024年01月16日
    浏览(39)
  • 前端vscode必备插件

    1、Auto Rename Tag⭐ 修改标签会同步修改 2、Auto Import - ES6, TS, JSX, TSX 自动查找、解析并为所有可用导入提供代码操作和代码完成。适用于 JavaScript (ES6) 和 TypeScript (TS) 3、Code Runner⭐ 快速运行 调试js 4、CSS Peek 跳转对应 css 5、DotENV 高亮ENV文件 6、Error Lens 显示错误 7、ESLint 8、GitL

    2024年02月03日
    浏览(39)
  • 前端vscode必备插件推荐

    目录 一、前言 二、工具推荐 1.《Chinese (Simplified) (简体中文) Language》 2.《ESLint》 3.《Git History》 4.vscode-icons  5.Path Intellisense 6.《Vetur》 7.《GitLens — Git supercharged》 8.《Image preview》 9.Debugger for Chrome 10.Prettier 11.AnyRule  13.Vue Language Features (Volar) 14.Vite 15.Code Spell Checker 16.Error Lens

    2023年04月09日
    浏览(57)
  • 【VScode】前端必备插件(全)

    Chinese (Simplified) 适用于 VS Code 的中文(简体)语言包 Auto Close Tag 自动闭合HTML/XML标签 Auto Rename Tag 自动重命名配对的HTML/XML标记 ,完成另一侧标签的同步修改 Path Intellisense 自动提示文件路径,支持各种快速引入文件,支持自动补全 Bracket Pair Colorizer 给括号加上不同的颜色,便

    2024年02月09日
    浏览(50)
  • 前端开发工具: VSCode

    VSCode 安装使用教程(图文版) | arry老师的博客-艾编程 1. 下载 在官方网站:https://code.visualstudio.com/ 下载最新版本的 VSCode 即可 2. VSCode 常见插件安装 所有插件安装后,需要重启一下才生效 2.1 简体中文语言包   2.2   编辑器主题选择、设置     2.3 vscode-icons 显示代码图标  

    2024年02月11日
    浏览(55)
  • 前端开发工具vscode

    一、下载安装 https://code.visualstudio.com/ 二、安装插件 三、使用 ①、创建一个空目录 ②、利用vscode工具打开该目录 ③、将该目录设置为工作区 在工作区中添加文件,还可以进行浏览器访问(提前安装了Live Server插件) =============================================================== 为工具添

    2024年02月07日
    浏览(53)
  • vscode 前端开发插件 2023

    自己记录 安装vscode后必装插件 chinese+git 必装没啥可说 随时更新 CTRL+点击类名可跳转到对应样式位置。 如果是scss less的话。css peak插件无法生效 可以看到每一行的git提交记录。 可以同步更新前后标签名 自动补全标签 颜色高亮显示。js+html+css文件都可以显示 html js css

    2024年02月14日
    浏览(40)
  • vscode前端必备插件

    安装插件的位置如下: 1、Chinese (Simplified) Language Pack 中文简体插件 2、Vetur Vue官方钦定插件,包括:语法高亮,智能提示,错误提示,格式化,自动补全等等 3、ESLint 语法检查工具,可以检测 JavaScript 代码中的语法错误、提供纠错建议,帮助提高代码质量和可读性。ESLint 支持

    2024年02月07日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包