【VS Code插件开发】入门篇(一)

一、准备

VS code插件开发学习,可以参考官方文档

1、安装依赖

javascript 复制代码
npm install -g yo generator-code
名称 描述
yo yo也就是Yeoman,Yeoman 是一个脚手架工具,帮助开发人员使用预定义的模板和生成器创建项目。它通过自动化重复任务来简化设置新项目的过程。
generator-code VS Code 扩展设计的 Yeoman 生成器。它提供一组脚手架模板和工具,可快速创建适用于 VS Code 编辑器的新扩展,需要与yo配合使用

2、生成项目

javascript 复制代码
yo code
javascript 复制代码
? What type of extension do you want to create? New Extension (TypeScript)
	// 这里我们先选择第一项,New Extension (TypeScript),进入下一步
? What's the name of your extension? HelloWorld
	// 插件名称
? What's the identifier of your extension? hello-world
	// 插件标识符(唯一id),这个是你后面发布上去后插件的名称,一般和上一步名称一样
? What's the description of your extension?
	// 插件描述
? Initialize a git repository? Yes
	// 是否初始化git,选择yes
? Bundle the source code with webpack? No
	// 是否使用webpack构建你的项目,这里默认No
? Which package manager to use? yarn
	// 选择包管理器,这里有npm和yarn两个选项,我一般用yarn

然后插件demo就生成了

├─ .eslintrc.json //ESLint 的配置文件

├─ .vscode //VS Code 编辑器的配置目录,包含有关工作区和项目的设置。

│ ├─ extensions.json //推荐的扩展列表和推荐的工作区扩展设置。

│ ├─ launch.json // 包含调试配置,用于在 VS Code 中调试扩展

│ ├─ settings.json //包含编辑器设置和工作区设置。

│ └─ tasks.json //包含任务配置,用于在 VS Code 中运行各种任务

├─ .vscodeignore //这是 VS Code 编辑器的忽略文件配置,类似于 .gitignore,但只在编辑器中生效。

├─ CHANGELOG.md //项目的变更日志文件,记录每个版本的变更内容和更新说明。

├─ README.md //项目的自述文件

├─ package.json

├─ src

│ ├─ extension.ts // //扩展的主要入口点文件

├─ tsconfig.json //TypeScript 的配置文件

├─ vsc-extension-quickstart.md //这是一个快速入门指南,可能是项目的起始文档,用于帮助新用户快速了解如何开始开发这个 VS Code 扩展

└─ yarn.lock

在开发时我们首先需要看vsc-extension-quickstart.md文件,该文件是一个快速入门指南,可能是项目的起始文档,用于帮助新用户快速了解如何开始开发这个 VS Code 扩展。

二、讲解extension.ts 、package.json 文件介绍

extension.ts、package.json这两个文件是Vs code扩展项目最主要的文件。extension.ts是扩展的主要逻辑,包括提供命令实现、注册webview等;package.json主要是注册命令、侧边栏菜单注册等

1、extension.ts

扩展的主要逻辑

javascript 复制代码
import * as vscode from 'vscode';
//当扩展被激活时,会调用此方法,您的扩展在第一次执行命令时就被激活了,并且只会在激活时调用
export function activate(context: vscode.ExtensionContext) {

//1、helloWorld命令已在package.json文件中定义
//2、用registerCommand提供该命令的实现,commandId参数必须与package.json中的命令字段匹配
//3、注册的命令必须push到context.subscriptions


	let disposable = vscode.commands.registerCommand('demoPlugin.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from helloWord!');
	});
	context.subscriptions.push(disposable);
}
//当扩展被停用时,会调用此方法
export function deactivate() {}

2、package.json

javascript 复制代码
{
  "name": "demoPlugin", //插件名称
  "displayName": "helloWord",//插件市场显示的名称
  "description": "simple",//插件描述
  "version": "0.0.1",//插件版本
  "publisher": "mr_cat", // 插件发布者
  "engines": {
    "vscode": "^1.80.0"//插件支持的最低版本
  },
  "categories": [
    "Other"
  ],
  //扩展的激活事件
  "activationEvents": [],
  "main": "./out/extension.js",//入口文件路径
  //贡献点
  "contributes": {
    "commands": [ //对应命令列表
      {
        "command": "demoPlugin.helloWorld",
        "title": "Hello World"
      }
    ]
  }
}

demo项目中package.json配置如果,这里补充下其他的配置选项

javascript 复制代码
 "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "Hello World" 
      }, 
    ],
    //定义插件在 Activity Bar(活动栏)中的视图容器。
    "viewsContainers": {
    //表示在 Activity Bar 中展示的容器列表。
      "activitybar": [
        {
          "id": "todolist-container",//视图容器的唯一标识符
          "title": "vsPlugin",//视图容器的名称
          "icon": "media/logo.png"//视图容器的图标
        }
      ]
    },
    //定义插件的 Webview 视图。
    "views": {
    // 表示 Webview 视图所属的容器,与 viewsContainers 中定义的 id 对应。
      "todolist-container": [
        {
          "id": "todolist-view",//Webview 视图的唯一标识符
          "name": "vsPlugin",// Webview 视图的名称
          "icon": "media/logo.png",//Webview 视图在 Activity Bar 中显示的图标,指定图标的路径
          "type": "webview",//Webview 视图的类型,这里是 "webview" 表示是一个 Webview 视图。
          "contextualTitle": "vsPlugin"//Webview 视图在显示时的上下文标题。
        }
      ]
    },
    //定义插件的键盘绑定(快捷键)。
    "keybindings": [
      {
        "command": "extension.copyCommand",//绑定的命令标识符,与 commands 中定义的 command 对应,指定按下快捷键时要执行的命令。
        "key": "ctrl+c",//在 Windows 系统上的替代快捷键
        "mac": "cmd+c",//在 macOS 系统上的替代快捷键
        "when": "editorTextFocus"//定义绑定生效的条件,这里是 "editorTextFocus" 表示只有在编辑器获得焦点时才生效
      }
    ]
  }

三、测试

打开项目按 F5 或启动调试,可以看到会出现一个扩展窗口,我们按下 command + shift + p 或者crtl + shift + p 在输入框中输入注册的命令即可调用插件中逻辑。

  • 输入框输入注册命令
  • 底部出现通知的弹框

四、打包

打包需要用到vsce,先安装

  • 安装依赖
javascript 复制代码
npm install -g vsce
或者
npm install -g vsce
  • 打包 生成vsix文件,然后打开Vs code开发工具,点击在插件市场右上角的三个点,最后一个选项install from VSIX,就可以本地安装了
javascript 复制代码
vsce package

五、发布

VS Code的应用市场基于微软自己的Azure DevOps,插件的身份验证、托管和管理都是在这里。

要发布到应用市场首先得有应用市场的publisher账号;而要有发布账号首先得有Azure DevOps组织;而创建组织之前,首先得创建Azure账号;创建Azure账号首先得有Microsoft账号。

也就是说:一个Microsoft账号可以创建多个Azure组织;一个组织可以创建多个publisher账号;同时一个组织可以创建多个PAT(Personal Access Token,个人访问令牌) 具体步骤如下: (1)注册Microsoft帐号 (2)注册Azure账号 (3)注册创建发布者 (4)终端 vsce publish 或者使用vsce package将扩展打包成可安装的 VSIX 格式,然后上传到Visual Studio Marketplace 发布者管理页面

详细请看官网,网上教程基本都是这,不如直接看官网:发布插件

相关推荐
贩卖纯净水.几秒前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js