VsCode插件开发之ChatGPT实战

基础介绍🗣︎

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

VSCode布局:

插件开发💻

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

开发环境准备📝

  • 安装最新版本的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📄

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下配置的命令来运行插件。

打包发布👜

发布插件的方式有三种:

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

这里只介绍第三种方式:

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

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

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

相关推荐
win4r7 小时前
🚀彻底改写浏览器自动化!ChatGPT Atlas浏览器深度评测:Agent模式自动操作网页太疯狂!跨网页理解+长文秒懂+图片识别,论文工作流被改写!看完你会
chatgpt·aigc·openai
lanhuazui1010 小时前
【Vscode】显示多个文件 & 打开多个文件时实现标签栏多行显示
vscode·编辑器
八月正好an12 小时前
visual studio安装本地帮助手册
ide·visual studio
一点一木13 小时前
ChatGPT Atlas 发布:把 AI 直插进浏览器的一次重构
人工智能·chatgpt·浏览器
张较瘦_13 小时前
环境搭建 | [入门级]VSCode(Cursor|Trae|Qoder)搭建Java(Springboot3)企业开发环境全流程
java·ide·vscode
生莫甲鲁浪戴14 小时前
Android Studio新手开发第二十一天
android·ide·android studio
生莫甲鲁浪戴14 小时前
Android Studio新手开发第二十二天
android·ide·android studio
天赐细莲15 小时前
(Linux) WSL 通过 VSCode 连接不执行 profile 问题(登录Shell问题)
linux·运维·vscode
暮色驶过苍茫1 天前
VSCode 配置 SSH 远程连接
ide·vscode·ssh
lichong9511 天前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++