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. 如果需要更新插件,只需要重新打包并发布。
相关推荐
移民找老国11 小时前
加拿大移民新风向
java-ee·maven·phpstorm·visual studio code·nio
闪亮Girl3 天前
vs2015安装插件QtPackage.vsix等vsix文件类型
visual studio code
SuperYing4 天前
💯What?维护新老项目频繁切换node版本太恼火?开发一个vscode插件自动切换版本,从此告别烦恼
前端·visual studio code
羊小猪~~5 天前
数据结构C语言描述1(图文结合)--顺序表讲解,实现,表达式求值应用,考研可看
java·c语言·数据结构·c++·链表·visual studio code·visual studio
羊小猪~~5 天前
C/C++语言基础--C++模板与元编程系列三(变量模板、constexpr、萃取等…………)
java·c语言·开发语言·c++·visual studio code·visual studio
羊小猪~~8 天前
C/C++语言基础--C++模板与元编程系列二类模板、全特化、偏特化、编译模型简介、实现简单Vetctor等…………)
java·c语言·开发语言·c++·visual studio code·visual studio
编程老船长14 天前
用PlantUML让状态图“动”起来 —— 快速绘制老师申报课程流程
uml·visual studio code
风雪中的兔子16 天前
vscode插件开发入门:小试牛刀
前端·visual studio code
musiclvme17 天前
ubuntu22.04下GStreamer源码编译单步调试
ubuntu·音视频·visual studio code
Luncert19 天前
Vscode 插件开发 - TreeView
visual studio code