vscode插件开发(从创建到发布)

一、创建项目

  1. 创建VsCode的插件项目,将会用到yogenerate-code,因此,先安装这两个脚手架。
css 复制代码
npm i -g yo generate-code
  1. 然后,初始化插件目录。
css 复制代码
yo code

注:如果报错:You don't seem to have a generator with the name "generator-code" installed. 就先执行npm install generator-code.

执行命令之后,根据个人要求选择:

二、插件目录结构

swift 复制代码
variable-finding        // 项目名称
├─ commitlint.config.js
├─ lint-staged.config.mjs
├─ package-lock.json
├─ package.json
├─ README.md
├─ src      // 源文件
│  ├─ extension.ts  // 插件入口
│  └─ test          // 测试文件
│     ├─ runTest.ts
│     └─ suite
│        ├─ extension.test.ts
│        └─ index.ts
├─ tsconfig.json
└─ vsc-extension-quickstart.md
json 复制代码
{
  "name": "variable-finding", // 定义了插件的包名,它必须是唯一的并且符合 npm 的包命名规范。
  "displayName": "Variable Finding",  // 定义了插件在 Visual Studio Code 中显示的名称。
  "description": "",
  "version": "0.0.1", 
  "engines": {
    "vscode": "^1.83.0"   // 定义了插件所支持的 Visual Studio Code 的最低版本。
  },
  "categories": [   // 定义了插件所属的分类,以便在 Visual Studio Code 中组织和展示插件。
    "Other"
  ],
  "activationEvents": [],    //  定义了激活插件的事件
  "main": "./out/extension.js",  // 定义插件的入口文件
  "contributes": {
    "commands": [
      {
        "command": "variable-finding.mytest",  // 注册的插件命令
        "title": "mytest"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js",
    "prepare": "husky install",
    "commitlint": "commitlint --config commitlint.config.js -e -V"
  },
  "devDependencies": {},
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

三、运行插件

  1. 在项目任何文件下,执行 F5;vscode将会打开一个新的调试窗口;
  1. 在新的调试窗口中,按 ctrl + shift + p,打开命令面板;
  1. 输入注册的插件命令,即可执行插件。 在package.json和extension文件中定义了命令,项目的默认命令是hello word,可自行更改。

四、功能实现

extension.ts作为项目的入口文件,里面的两个函数定义了插件激活/销毁时要执行的功能:

javascript 复制代码
// 插件激活
export function activate(context: vscode.ExtensionContext) {
  console.log(
    'Congratulations, your extension "variable-finding" is now active!',
  );

  // 注册命令
  let disposable = vscode.commands.registerCommand(
    'variable-finding.mytest',  // 这个名称必须与package.json中的命令名称一致
    () => {
      // 功能实现
    },
  );

  // 将命令注册到上下文中,以便在插件停用时自动清理
  context.subscriptions.push(disposable);
}
javascript 复制代码
// 插件销毁
export function deactivate() {
  // 定义插件停用时需要执行的清理工作
  // 如移除事件监听器、关闭打开的文件或网络连接...
}

因此,具体的功能实现方式和开发普通项目的方式并无差异,可以根据不同的功能模块划分不同的文件夹,然后在extension中调用对应的功能即可。

开发过程中可以打断点+F5来调试项目。

打包发布

  1. 账号准备:创建或登录到Visual Studio Code Marketplace账户:

访问 marketplace.visualstudio.com/manage ,使用GitHub、Microsoft 或 Azure DevOps 账户登录。如果还没有账户,按照页面提示创建一个。

  1. 账号配置:在package.json的配置基础上,新增一个"publisher: publisher ID ", publisher ID就是注册账号是自动生成的id。publisher字段的值需要与发布该包的账号保持一致,不然会发布失败。

  2. 安装打包命令。

    npm install -g vsce

  3. 在根目录下执行打包命令,执行成功后,会在根目录下生成 .vsix 文件。

go 复制代码
vsce package
  1. 发布插件

① 方式一:命令发布

css 复制代码
vsce publish -p YOUR_PUBLISHER_ID

② 方式二:平台发布

③ 方式三:在发布前,也可以先安装到本地的vscode中,测试一下效果

  1. 发布完成之后,就可以在vscode的插件中搜索到发布的包了。
  2. 如果需要更新插件,只需要重新打包并发布。
相关推荐
清沫16 小时前
键盘效率提升指南(VSCode+Vim+SurfingKeys)
前端·vim·visual studio code
OLong2 天前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
一眼万年042 天前
每天都在使用的VS Code Copilot Chat 开源啦!
aigc·ai编程·visual studio code
pe7er12 天前
vscode插件Hybrid Mode混合模式不兼容导致vue3项目在vscode爆红、类型推导失效的解决方案
vue.js·visual studio code
是紫焅呢14 天前
I排序算法.go
开发语言·后端·算法·golang·排序算法·学习方法·visual studio code
是紫焅呢15 天前
E结构体基础.go
开发语言·后端·golang·学习方法·visual studio code
是紫焅呢16 天前
F接口基础.go
开发语言·后端·青少年编程·golang·visual studio code
攀登的牵牛花16 天前
🚀【效率利器】Spine动画瘦身秘籍:一键批量PNG To WebP,Atlas自动更新!
前端·visual studio code
是紫焅呢17 天前
C函数基础.go
开发语言·后端·青少年编程·golang·学习方法·visual studio code
是紫焅呢17 天前
D包和模块.go
开发语言·后端·golang·学习方法·visual studio code