AI驱动插件创新：开发效率新突破

彼日花
530 阅读8分钟

一、引言

本文将带你深入了解如何利用AI，尤其是强大的语言模型Gemini，来辅助VSCode插件开发。从项目搭建、功能实现到问题解决，我们将通过一个具体的实例，展示AI在插件开发中的应用，并探讨AI如何改变我们的开发方式。

二、插件开发现状与挑战

1.现状

  • VSCode 本身的流行： 作为一款轻量级、高度可定制的代码编辑器，VSCode 赢得了广大开发者的青睐。
  • 插件开发门槛降低： VSCode 提供了丰富的 API 和完善的文档，使得插件开发变得相对容易。
  • 社区的繁荣： 庞大的开发者社区为插件开发提供了丰富的资源和支持。
  • 多样性： 从代码补全、主题定制到版本控制、调试工具，插件涵盖了开发过程的方方面面。
  • 专业化： 针对特定语言、框架或工具的插件层出不穷，满足了开发者日益精细化的需求。

2.挑战

  • 插件质量参差不齐： 正是由于开发门槛较低，插件质量良莠不齐。如何提升插件质量已成为广大开发者的首要思考。
  • 性能问题： 一些插件可能导致 VSCode 运行缓慢或出现卡顿。
  • 插件冲突： 多个插件之间可能存在冲突，影响编辑器的正常工作。
  • 文档不足： 一些插件的文档不够完善，给开发者带来使用上的困难。
  • 兼容性问题：随着VSCode的不断更新，插件需要保持与最新版本的兼容性，这需要持续的维护和更新。
  • 用户体验：一个直观且易用的插件界面，是确保用户能够轻松上手和使用的必要前提。

综上所述，VSCode 插件生态呈现出蓬勃发展的态势：插件数量激增、开发门槛大幅降低、社区活跃度高涨，插件类型也愈加多样化和专业化。然而，如何开发一款符合自己需求的高质量VSCode插件，仍然是众多开发者亟待解决的难题。

三、插件开发新范式

万事万物都是先从无到有，一切伟大起初都源于一个最初的梦。最关键的是如何将脑海中的构想化为现实。没有行动，再伟大的想法也终将如泡沫般消散。

一千个开发者眼中，有一千个插件。每个开发者都有自己独特的视角和偏好。

万事开头难，将想法转化为代码，往往是一段曲折的旅程。你是否曾渴望一个能读懂你的思想，在你编程遇到瓶颈时给予帮助的伙伴？在人工智能时代，你的奇思妙想将拥有无限可能。

四、Gemini 无限可能

Gemini是一款由Google AI开发的强大语言模型，能理解你的问题、指令，并生成各种文本，比如回答问题、写文章、翻译语言，甚至还能帮你完成各种创意写作。

Gemini正在深刻地改变着日常开发者的开发习惯。相对于传统的开发方式，AI赋能代码有以下的优点：

  • 加速开发： AI可以根据上下文和已有代码，自动生成大量代码片段，大大减少了开发人员的重复劳动。
  • 提高代码质量： AI生成的代码通常具有更高的质量和可读性，减少了bug的产生。
  • 学习曲线缩短： 对于新手开发者，AI可以提供智能提示和建议，帮助他们快速上手。
  • 降低开发门槛： 通过自然语言，开发者可以用更接近人类语言的方式来写代码，降低了编程的难度。
  • 提高开发效率： 开发者可以直接描述想要实现的功能，AI会自动生成对应的代码。

五、点燃插件之梦

曾经觉得插件开发拥有千山万水的阻隔，但如今愈发感觉，努力提升自我，不断强化自己的技术壁垒是尤为重要的。

接下来，我将结合使用Gemini来打造属于自己的第一款小插件！

1.项目搭建

万事开头难，说干就干，直接一顿操作...

npm install --global yo generator-code
yo code

按脚手架提示进行项目配置,得到如下目录

目录.png

2.想法构思

项目有了，那做点什么好呢？ 不如先做个小功能吧，于是我结合之前项目组内在开发时拥有的痛点，我决定做一个鼠标悬浮预览图片的功能。 将鼠标悬浮到编辑器中的链接时，该链接如果是图片，那么我想让它悬浮展示，其他类型资源不做处理。

可是，vscode插件开发的API有那么多，且都是英文的，我一个一个找效率实在是太慢了。但是！遇到问题不能慌，一步一步来，心急吃不了热豆腐，实在不行可以借助一下强大的Gemini

于是我将核心步骤列出来：

  • 鼠标hover时触发的API
  • 读取图片链接
  • 判断是否为图片资源
  • 展示图片资源

我尝试将想法告诉Gemini，并询问上述步骤的一些实现思路。

想法告诉AI.png

通过Gemini我得知上述实现可以这么做：

  1. 鼠标hover会触发的回调： activeFileTypeArray 为所要支持该功能的语言 hoverProvider 为回调事件 vscode.languages.registerHoverProvider(activeFileTypeArray, hoverProvider)

  2. 通过正则表达式匹配

    const regexp =
    /((https?):)?\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
const res = lineContent.match(regexp);//lineContent为上下文传入获取

  3. 通过获取请求头中的 content-type 来判断是否为图片资源

  4. 图片展示可以通过 markdown 或者 html 标签来实现 主要通过返回该构造函数 new vscode.Hover(contents)

3.核心开发

知道核心思路和API调用，那么实现就简单了，当不知道如何使用类型定义的时候，你可以点击查看具体的传入传出，这也正是使用ts开发插件的好处。

1）代码展示

import axios from "axios";
export async function isImage(url: string) {
  // 通过传入url的请求头来判断是否为图片;
  const res = await axios.get(url);
  const contentType = res.headers["content-type"];
  return contentType?.startsWith("image");
}
export default function (context: vscode.ExtensionContext) {
  //支持文件类型配置
  const activeFileTypeArray: DocumentSelector = "*"; //支持所有文件类型
  let hoverProvider: HoverProvider = {
    provideHover: async (document: TextDocument, position: Position) => {
      const { line } = position;
      const lineContent = document.lineAt(line).text;
      const regexp =
        /((https?):)?\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
      const res = lineContent.match(regexp);
      if (res === null) {
        return;
      }
      const url = res[0];
      const contents = new vscode.MarkdownString();
      contents.supportHtml = true; //支持html渲染
      const showPreview = await isImage(url);
      if (showPreview) {
        contents.value = `<img src='${url}' width='108' height='108'/>`;
        return new vscode.Hover(contents);
      }
    },
  };
  context.subscriptions.push(
    vscode.languages.registerHoverProvider(activeFileTypeArray, hoverProvider)
  );
}

2）效果展示

效果图.gif

以上是我结合官方文档和Gemini给出的建议完成的，我发现这样的开发模式，让原本需要好几天才能动手的我也能快速入门vscode插件开发了。

至此，这个初版的图片预览算是完成了，后续还有很多的优化空间。 比如：

  • 预览功能的开关添加
  • 如何减少请求次数
  • ......

完整的流程应有如何上架插件市场，但由于时间有限，有兴趣的小伙伴，不妨通过询问一下AI如何上架，正好感受一下它所给你带来的惊喜，说不定下一个插件市场的新星就是你！

六、未完待续

作为一名前端开发者，我亲身经历了这个领域的快速发展。前端插件生态的繁荣让我既兴奋又担忧。一方面，插件数量的激增和社区的活跃为开发者提供了丰富的资源和灵感；但另一方面，插件质量参差不齐、性能问题频发也让我感到困惑。

为了解决自身在业务中遇到的一些开发问题，我开始探索AI在插件开发中的应用。 通过将Gemini这样的语言模型引入到我的开发流程中，我发现它能为我提供意想不到的帮助。比如，在编写代码时，我可以直接向Gemini描述我的需求，它就能生成相应的代码片段，大大提高了我的开发效率。

为了能快速入门插件开发，我使用AI辅助开发了一个插件小功能，实现了鼠标悬浮预览图片的功能。 在这个过程中，我深刻体会到，AI不仅能帮助我解决技术难题，还能激发我的创造力。

展望未来，我坚信AI将会彻底改变插件开发的模式。 开发者将不再仅仅是代码的编写者，而是更多地扮演一个“设计师”的角色。通过与AI的协作，我们可以创造出更加智能、高效、个性化的插件。

总结来说，AI为插件开发带来了无限可能。 我迫不及待地想看到这个领域在未来能够取得怎样的突破。

希望我的分享能给大家带来一些启发。

文章的最后，你的看法是什么呢？不妨在评论区说说看~

avatar
文章
阅读
粉丝