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文件

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

相关推荐
may_一一8 小时前
pycharm\python 安装下载
ide·python·pycharm
YouEmbedded8 小时前
ARM开发板基础与文件传输
arm开发·vscode·交叉编译·mobaxterm
没有梦想的咸鱼185-1037-16638 小时前
AI Agent结合机器学习与深度学习在全球气候变化驱动因素预测中的应用
人工智能·python·深度学习·机器学习·chatgpt·数据分析
猫头虎12 小时前
openAI发布的AI浏览器:什么是Atlas?(含 ChatGPT 浏览功能)macOS 离线下载安装Atlas完整教程
人工智能·macos·chatgpt·langchain·prompt·aigc·agi
Cosmoshhhyyy12 小时前
macOS环境安装jupyter notebook(极简版)
ide·macos·jupyter
极昆仑智慧14 小时前
OpenAI推出了支持人工智能的浏览器ChatGPT Atlas
人工智能·chatgpt
hunteritself14 小时前
阿里千问上线记忆,Manus 1.5 全栈升级,ChatGPT 将推成人模式!| AI Weekly 10.13-10.19
大数据·人工智能·深度学习·机器学习·chatgpt
小虎AI生活14 小时前
别光盯着Claude,CodeBuddy的Codex才是AI编程爱好者的下一个效率神器!
chatgpt·ai编程·codebuddy
西贝爱学习14 小时前
快速下载jdk17+Android Studio 2025
android·ide·android studio
HIT_Weston16 小时前
13、【Ubuntu】【VSCode】VSCode 断联问题分析:hostname(一)
linux·vscode·ubuntu