前端开发神器之 VsCode AI 辅助插件 DevChat

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


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

前言

我们都有过写代码时反复看了半天也不知道bug在哪,大大浪费了时间。一些基础的代码可能看一会儿能够解决,但是复杂的代码就要花上一二个小时去检查,甚至更久。如果有个AI工具,可以帮助我们搞定基础代码,复杂的逻辑给我们提供给逻辑,那岂不是更好啦。本文给大家介绍一款VS Code AI辅助工具-DevChat,开发效率直接翻倍!

DevChat介绍

前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划
DevChat 是一个集成了多种主流大模型的 AI 编程工具,专注于提升程序员的编程效率。它整合了ChatGPT等热门 AI 应用,支持自然语言编程、代码编写、代码生成、代码补全等功能。Devchat 最大的优势是一站式服务,集成热门大模型,并且可以根据需求随心切换,省去了选择和整合不同AI模型的麻烦,无需过多配置就可以快速上手,从而全面提升开发效率。

产品务实高效,近期还在2023QCon全球软件大会亮相,斩获众多圈内开发者的好评 |

DevChat 独特优势

DevChat 兼容多种主流大模型,多种模板快速响应,不用纠结AI编程助手哪家好,大模型包括GPT-4 8k/32k、GPT-3.5 4k/16k、Claude2、文心一言、星火、ChatGLM、Code Llama等;可根据需求选择代码片段进行AI咨询。所以DevChat AI辅助工具对开发者提高工作效率真的很有帮助,具体优势如下:

1、多种大模型任意选。复杂任务非 GPT-4 莫属,简单任务交给低成本模型,组合使用效能最佳。

2、精准的“上下文”管理。对上下文的精确控制是有效使用人工智能的关键。DevChat 将控制权交给用户,以实现真正的生产力,并提供用户友好的方法来简化上下文选择。

3、上手简单。您不必学习特定编程语言的新框架来扩展人工智能以满足您的需求。 提示应该对用户可见且易于编辑,而不是隐藏在复杂的框架中。您不需要复杂的框架来让人工智能为您服务。所需要的只是一个在您的文件系统上运行的标准编辑器。

4、实用。利用人工智能编码能力的瓶颈在于如何在提示中嵌入正确的上下文,仅当人工智能真正增加价值时才使用它

5、简单可扩展的提示词目录。开放提示词扩展,Prompts as Code,满足团队和个人自定义需求。

6、灵活的 Prompt 模板管理,ask-code功能解答代码库的各类问题。

7、产品设计务实,迭代反馈快。

8、代码和文档自由生成,而非简单补全。

9、对接微软 Azure 服务,可信赖的企业级数据安全

官方地址:https://meri.co/tvy

注册账号

DevChat账号注册地址:链接直达,注册之后发送到邮箱的key,注意保存下来,在安装插件之后需要用到。

安装插件

打开VS Code开发工具,在应用市场搜索DevChat,然后点击install
前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划
安装完之后就可以在侧边栏有个类似小兔子图标,点击之后就可以看到插件的视图。

前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划

设置密钥访问

插件需要密钥访问,密钥是在注册时发送到邮箱里的。

在 Visual Studio Code 中按 ⇧⌘P / Ctrl+Shift+PF1 打开命令面板。接下来,输入devchat access key并输入上面的访问密钥。注意不要忘记安装Python 3.8+和Git来使用 DevChat。

前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划
然后输入邮箱里的key就可以啦
前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划
之后就可以正常使用啦!

指令

DevChat提供了下面的指令,方便了我们在开发时的操作以及对代码的分析。

  • 自定义本地命令
    单击此项并输入您想要的命令以运行。返回将被添加到上下文中。
  • git diff --cached
    自上次提交以来已暂存的更改
  • git diff HEAD
    自上次提交以来的所有更改
  • git log for release note
    自指定提交以来的格式化提交历史记录
  • symbol definitions
    在所选代码中查找类、函数等的相关定义
  • symbol references
    查找引用所选符号(类、函数、变量等)的代码站点
前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划

比如我要用symbol references分析下面的代码:

let transAudioData = {
  transcode(audioData) {
    let output = transAudioData.to16kHz(audioData)
    output = transAudioData.to16BitPCM(output)
    output = Array.from(new Uint8Array(output.buffer))
    self.postMessage(output)
    // return output
  },

选择symbol references之后,可以看到控制台中的OUTPUT输出一段JSON。
前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划
将图中的字符串转JSON之后如下:

{
    "languageId": "javascript",
    "path": "../study-demo/kedaxunfei/src/until/transcode.worker.js",
    "startLine": 6,
    "content": "  transcode(audioData) {\r\n    let output = transAudioData.to16kHz(audioData)\r\n    output = transAudioData.to16BitPCM(output)\r\n    output = Array.from(new Uint8Array(output.buffer))\r\n    self.postMessage(output)"
}

AI 解疑

DevChat提供了图中8种AI模型,根据需求选择其中一种进行对话操作。

前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划

选择GPT-3.5模型,然后向DevChat输入需求:手写Promise,让其帮助我们进行解答。DevChat回答如下:
前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划
下面是回答的全部代码,可见回答的十分详细。

enum PromiseStatus {
  Pending = 'pending',
  Fulfilled = 'fulfilled',
  Rejected = 'rejected'
}

class MyPromise<T> {
  private status: PromiseStatus;
  private value: T;
  private reason: any;
  private onFulfilledCallbacks: ((value: T) => void)[];
  private onRejectedCallbacks: ((reason: any) => void)[];

  constructor(executor: (resolve: (value?: T) => void, reject: (reason?: any) => void) => void) {
    this.status = PromiseStatus.Pending;
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value?: T) => {
      if (this.status === PromiseStatus.Pending) {
        this.status = PromiseStatus.Fulfilled;
        this.value = value;
        this.onFulfilledCallbacks.forEach(callback => callback(this.value));
      }
    };

    const reject = (reason?: any) => {
      if (this.status === PromiseStatus.Pending) {
        this.status = PromiseStatus.Rejected;
        this.reason = reason;
        this.onRejectedCallbacks.forEach(callback => callback(this.reason));
      }
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then<U>(onFulfilled?: (value: T) => U | PromiseLike<U>, onRejected?: (reason: any) => U | PromiseLike<U>): MyPromise<U> {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };

    const promise = new MyPromise<U>((resolve, reject) => {
      const handleFulfilled = (value: T) => {
        try {
          const result = onFulfilled!(value);
          if (result instanceof MyPromise) {
            result.then(resolve, reject);
          } else {
            resolve(result);
          }
        } catch (err) {
          reject(err);
        }
      };

      const handleRejected = (reason: any) => {
        try {
          const result = onRejected!(reason);
          if (result instanceof MyPromise) {
            result.then(resolve, reject);
          } else {
            resolve(result);
          }
        } catch (err) {
          reject(err);
        }
      };

      if (this.status === PromiseStatus.Pending) {
        this.onFulfilledCallbacks.push(handleFulfilled);
        this.onRejectedCallbacks.push(handleRejected);
      } else if (this.status === PromiseStatus.Fulfilled) {
        setTimeout(() => {
          handleFulfilled(this.value);
        }, 0);
      } else if (this.status === PromiseStatus.Rejected) {
        setTimeout(() => {
          handleRejected(this.reason);
        }, 0);
      }
    });

    return promise;
  }

  catch<U>(onRejected: (reason: any) => U | PromiseLike<U>): MyPromise<U> {
    return this.then(undefined, onRejected);
  }

  static resolve<U>(value?: U | PromiseLike<U>): MyPromise<U> {
    return new MyPromise<U>(resolve => resolve(value));
  }

  static reject<U>(reason?: any): MyPromise<U> {
    return new MyPromise<U>((_, reject) => reject(reason));
  }

  static all<U>(promises: (U | PromiseLike<U>)[]): MyPromise<U[]> {
    return new MyPromise<U[]>((resolve, reject) => {
      const results: U[] = [];
      let count = 0;

      const handleResolve = (value: U, idx: number) => {
        results[idx] = value;
        count++;
        if (count === promises.length) {
          resolve(results);
        }
      };

      promises.forEach((promise, idx) => {
        if (promise instanceof MyPromise) {
          promise.then(value => handleResolve(value, idx), reject);
        } else {
          handleResolve(promise, idx);
        }
      });
    });
  }

  static race<U>(promises: (U | PromiseLike<U>)[]): MyPromise<U> {
    return new MyPromise<U>((resolve, reject) => {
      promises.forEach(promise => {
        if (promise instanceof MyPromise) {
          promise.then(resolve, reject);
        } else {
          resolve(promise);
        }
      });
    });
  }
}

当然,如果我们在编辑器中有部分代码有疑惑,可以右键选择Add to AddChat,然后在左侧对话框输入我们的问题。比如,编辑器中我对下面的代码有疑惑,然后询问DevChat帮我解答疑惑。

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components'),
    },
    extensions: ['.js', '.json', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名,可以自己 增减
  },

前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划

可以看到当点击Add to AddChat后,左侧输入框就多个图标内容,主要记录的是你的操作。

前端开发神器之 VsCode AI 辅助插件 DevChat,vscode,人工智能,ide,DevChat,原力计划

下面是DevChat的回答:

这段代码是设置在一个使用Vite的项目中的路径别名(alias)和默认文件后缀(extensions)的配置。

  • alias: 这个属性允许你创建一些路径别名,在你引用这个路径时,可以使用别名代替真实路径。例如,在此代码中,‘@’ 代表了 ‘src’
    目录,‘components’ 代表了 ‘src/components’ 目录。所以如果你在项目中想引用 ‘src/components’
    目录下的 ‘Example.vue’ 文件,你可以这么做:import Example from
    ‘components/Example.vue’ 或 import Example from ‘@/Example.vue’。

  • extensions: 这个属性可以设置一些默认的文件后缀。例如在此代码中,设置了 ‘.js’, ‘.json’, ‘.ts’,
    ‘.vue’ 这几种文件后缀名,这样在引用文件时就可以省略这些后缀了。例如 import Example from
    ‘@/Example’,系统会自动尝试加载 ‘src/Example’ + 这些后缀名的文件。

这两个选项的配置都是用于简化路径引用和提高代码的可读性。

DevChat进行解答,这种形式不需要我们通过搜索引擎去搜索问题答案,真的是太高效了!

最后

体验之后,真的感受到人工智能的强大。提高开发效率是每一位程序猿的综合素养。在互联网降本增效的时代,希望我们每位程序猿都能顺应潮流,更高效地工作,减少无用功,将自身价值发挥到有意义的地方!文章来源地址https://www.toymoban.com/news/detail-727374.html

到了这里,关于前端开发神器之 VsCode AI 辅助插件 DevChat的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 编程辅助插件BitoAI使用指南(以VSCode开发环境为例安装并使用BitoAI插件从而提高生产效率)

    2023年是AI爆发元年,已经被各种AI工具、新闻轰炸了几个月,只有一种感觉:时间不够用! 本插件使用与ChatGPT相同的模型!目前免费,且拥有强大的辅助能力,可以数倍提升程序开发能力,并大大提高开发效率。 Bito AI使编写代码、理解语法、编写测试用例、解释代码、评论

    2023年04月25日
    浏览(66)
  • vscode 前端开发插件 2023

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

    2024年02月14日
    浏览(39)
  • 【开发必备】推荐几个非常好用的前端VsCode插件,快来看看你都用过哪些?

    VSCode是前端开发的武器,下面给大家推荐几个必备的、非常好用的前端VsCode插件 Better Align就是一款能够实现代码规范的工具,它主要用于代码的上下对齐。它能够用冒号(:)、赋值(=,+,-=,*=,/=)和箭头(=)对齐代码。 它的主要功能是为代码中的括号或者其他符号配

    2024年02月10日
    浏览(44)
  • Bito:一款 iead/webstorm 神级插件,由 ChatGPT 团队开发,堪称辅助神器

            idea(后端),webstorm(前端)中可以用的一款辅助插件:Bito 个人尝试体验效果: 优点是:可以自动完成一些场景代码。 缺点:太慢了,大部分时间一直转圈 什么是Bito? Bito是一款在IntelliJ IDEA编辑器中的插件,Bito插件是由ChatGPT团队开发的,它是ChatGPT团队为了提高开发效

    2024年02月01日
    浏览(45)
  • 推荐一款 IntelliJ IDEA 神级插件,由 ChatGPT 团队开发,免费使用,堪称辅助神器!

    来源:https://blog.csdn.net/m0_64880608/article/details/130201349 Bito是一款在IntelliJ IDEA编辑器中的插件,Bito插件是由ChatGPT团队开发的,它是ChatGPT团队为了提高开发效率而开发的一款工具。 ChatGPT团队是一支专注于自然语言处理技术的团队,他们开发了一款基于GPT的自然语言处理模型,可

    2024年02月02日
    浏览(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日
    浏览(47)
  • Vscode (Visual Studio Code)使用Thief-Book插件看小说摸鱼神器

    Vscode (Visual Studio Code)使用Thief-Book插件看小说摸鱼神器,话不多说直接开整: 第一步:打开 VS Code 编辑器,在侧边栏中选择“扩展”,搜索并安装 Thief-Book 插件  第二步:准备好要看的小说txt文件,需要另存为选一下utf-8格式,否则待会儿文字会乱码   选择utf-8格式 第三步:

    2024年01月18日
    浏览(79)
  • 【VScode】前端必备插件(全)

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

    2024年02月09日
    浏览(48)
  • 前端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日
    浏览(37)
  • vscode前端必备插件

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

    2024年02月07日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包