VsCode插件开发之ChatGPT实战

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

基础介绍🗣︎

VSCode 是采用了 Electron开发的跨平台的桌面应用,它兼容 Mac、Windows 和Linux,可以构建出三个平台的应用程序,基于VSCode开发的插件,同样也能在多个平台同时运行。

VSCode布局:

VsCode插件开发之ChatGPT实战,vscode,chatgpt,ide,vscode插件

插件开发💻

官方文档地址:https://code.visualstudio.com/api/references/vscode-api

VsCode插件开发之ChatGPT实战,vscode,chatgpt,ide,vscode插件

开发环境准备📝

  • 安装最新版本的VSCode
  • 建议使用>18.0.0的node版本
  • 使用官方推荐的脚手架工具Yeoman和Generator-code
  • 插件打包和发布工具vsce

安装工具🔧

全局安装

npm i -g yo generator-code
npm i -g vsce

脚手架使用✏

yo code

选择New Extension类型,然后依次填写插件名称、描述等基础信息。

package.json📄

{
    "name": "ai-codereview", // 插件的id
    "displayName": "ai-codereview",
    "description": "",
    "version": "0.0.1",
    "engines": { // 插件依赖的最低vscode版本
        "vscode": "^1.84.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [  // 激活事件
        "onCommand:ai-codereview.hellowWorld",
        "onLanguage:tsx"
    ],
    "main": "./extension.js", // 插件的主入口
    "contributes": { // 发布内容配置
        "commands": [
            {
                "command": "ai-codereview.helloWorld",
                "title": "Hello World"
            },
            {
                "command": "ai-codereview.codereview",
                "title": "AI codeReview"
            }
        ],
        "menus": {
            "editor/context": [
                {
                    "when": "editorFocus",
                    "command": "ai-codereview.codereview",
                    "group": "ai-codereview"
                }
            ]
        },
        "viewsContainers": {
            "activitybar": [
                {
                    "id": "hello",
                    "title": "hello",
                    "icon": "assets/icon.svg"
                }
            ]
        },
        "views": {
            "hello": [
                {
                    "id": "hello.view1",
                    "name": "VIEW 1"
                }
            ]
        }
    },
    "scripts": {
        "lint": "eslint .",
        "pretest": "npm run lint",
        "test": "node ./test/runTest.js"
    },
    "devDependencies": {
        "@types/vscode": "^1.84.0",
        "@types/mocha": "^10.0.3",
        "@types/node": "18.x",
        "eslint": "^8.52.0",
        "glob": "^10.3.10",
        "mocha": "^10.2.0",
        "typescript": "^5.2.2",
        "@vscode/test-electron": "^2.3.6"
    }
}

重点关注的主要有两部分内容:activationEvents以及contributes。

activationEvents:指明该插件在何种情况下才会被激活,因为只有激活后插件才能被正常使用,官网已经指明了激活的时机,具体是用的时候参照文档设置即可

  • onLanguage 打开解析为特定语言文件时被激活,例如"onLanguage:python"
  • onCommand 在调用命令时被激活
  • onView 每当在 VS Code 侧栏中展开指定 id 的视图

contributes:通过注册contributes来扩展vscode中的各项技能

运行插件✈

使用vscode打开插件所在目录,按下F5运行。在新打开的页面中,按command+shift+P进入[Command Palette],输入contributes.commands下配置的命令来运行插件。

VsCode插件开发之ChatGPT实战,vscode,chatgpt,ide,vscode插件

打包发布👜

发布插件的方式有三种:

  1. 直接共享源文件
  2. 发布到插件市场
  3. 打包成vsix插件安装

这里只介绍第三种方式:

前面我们已经全局安装了vsce,现在只需要在插件根目录下执行vsce package即可打包插件

如果遇到Make sure to edit the README.md file before you package or publish your extension报错,请先修改完善README.md文件

打包完成后,即可安装插件或者分享给他人使用👌

VsCode插件开发之ChatGPT实战,vscode,chatgpt,ide,vscode插件文章来源地址https://www.toymoban.com/news/detail-805154.html

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

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

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

相关文章

  • 关于写vscode ChatGPT插件遇到的一些问题

    出于对技术的专研想还原ChatGPT里面的一些交互,中间遇到遇到一些小问题做下总结 一、还原里面的富文本展示 chatgpt返回结果是这样的 最终实现效果 这里不仅还原了文本格式的展示,而且也还原了代码高亮。 可以看出chatgpt返回的是markdawn文本格式,要对markdawn文本格式做下

    2024年02月02日
    浏览(38)
  • 我做了一个 VSCode 插件版的 ChatGPT

    大家好,我是风筝 其实很早之前就想学学 VSCode 插件开发了,但是又不知道做什么,加上我这半吊子前端水平,迟迟没有动手。 最近 ChatGPT 火的一塌糊涂,我也一直在用,真的非常好用,有些问题之前需要 Google 搜索,现在用 ChatGPT 基本上都能直接解决,效率提升了不少。

    2024年02月03日
    浏览(46)
  • 【人工智能】VScode中使用ChatGPT之Bito插件

    之前在VScode中使用ChatGPT中文版,后来要注册与收费,可采用一些ChatGPT中文版的替代插件。 后发现 BitoAI插件 功能同样强大,免费,可中文,真香! 未来Bito若不能使用,可继续在VScode的扩展功能中搜索相关插件,已备使用。 https://code.visualstudio.com 可选择合适的版本,我选的

    2024年02月08日
    浏览(57)
  • 我在 vscode 插件里接入了 ChatGPT,解决了代码变量命名的难题

    lowcode 插件 已经迭代了差不多3年。作为我的生产力工具,平常一些不需要动脑的搬砖活基本上都是用 lowcode 去完成,比如管理脚手架,生成 CURD 页面,根据接口文档生成 TS 类型,生成 mock 等等。 借助 lowcode 的区块物料的功能,能快速生成 CURD 页面,但是前一段时间在做一些

    2024年02月08日
    浏览(37)
  • Chatgpt团队研发的idea、vscode免费无需外网的AI插件Bito 保姆级安装教程

    Bito是由chatgpt团队研发的一款ai工具,可以在idea和vscode中直接使用 本文详细介绍在idea、vscode中安装和使用Bito Bito是一款在编程软件中使用的插件,由ChatGPT团队开发的,它是ChatGPT团队为了提高开发效率而开发的一款工具。 官方说明: Bito helps developers dramatically accelerate their

    2024年02月04日
    浏览(39)
  • ChatGPT聊天机器人搭建全攻略精心整理汇总:微信 Discord 小爱同学 VSCode QQ 飞书 Siri OpenAI Translato翻译插件

    一、ChatGPT接入微信: ChatGPT接入微信 ChatGPT近期以强大的对话和信息整合能力风靡全网,可以写代码、改论文、讲故事,几乎无所不能,这让人不禁有个大胆的想法,能否用他的对话模型把我们的微信打造成一个智能机器人,可以在与好友对话中给出意想不到的回应,而且再

    2024年02月04日
    浏览(61)
  • 【VScode Embedded IDE】Keil工程导入VScode,与Keil协同开发MCU

    由于最近实习要练手一份代码量巨大的Keil项目(写得过于繁杂。由于有几百份第三方设备的源文件头文件,再加上各种条件编译,使得一份c文件里都有近6k行代码),让我这个小白非常头疼,再加之Keil相较于现在的IDE,编辑器在代码阅读,编写等方面都显得老旧些。在这么

    2024年02月05日
    浏览(44)
  • [C# SDK/IDE]-VSCode 搭建 C# 开发环境

    活动地址:毕业季·进击的技术er 夏日炎炎,热浪中我们迎来毕业季,这是告别,也是迈向新起点的开始,CSDN诚邀各毕业生/在校生/职场人讲述自己的毕业季故事,分享自己的经验,技术er的进击之路,等你来书写!我是从自身经历出发,分享自己的经验。 在技术学习过程中

    2023年04月08日
    浏览(44)
  • Go开发IDE全览:GoLand vs VSCode全面解析

    关注【TechLeadCloud】,分享互联网架构、云服务技术的全维度知识。作者拥有10+年互联网服务架构、AI产品研发经验、团队管理经验,同济本复旦硕,复旦机器人智能实验室成员,阿里云认证的资深架构师,项目管理专业人士,上亿营收AI产品研发负责人。 在软件开发的世界里

    2024年02月08日
    浏览(40)
  • Go 开发IDE全览:GoLand VS VSCode全面解析

    在软件开发的世界里,开发环境的选择与配置是成功项目的基础之一。特别是在Go(又名Golang)这样一个逐渐获得主流认同、在微服务和云计算领域有着广泛应用的编程语言中,选择合适的开发工具就显得尤为重要。虽然Go语言自身具有简洁、高效的特点,但好的开发工具能极

    2024年02月08日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包