一、当前环境条件

• Node: >= 14.18.1(建议使用 LTS 版本)
• yo: yo@4.3.1 （快速生成一个项目工程）
• generator-code: generator-code@1.7.2 （vscode 插件生成自定义模板项目代码）
• vsce: vsce@2.17.0 (管理插件工具)

二、安装依赖

npm install -g yo@4.3.1
npm install -g generator-code@1.7.2

三、生成模板代码插件

yo code

• 初始化过程

• 项目文件目录结构

四、开发 插件项目

vscode 插件开发文档

配置package.json说明

{
	  "name": "wen-hump-effect-underline",// 项目名称
	  "displayName": "humpEffectUnderline",// 插件展示名称
	  "description": "实现驼峰命名转下划线命令（规则： 1. 大写字母转 小写并在字母前加下划线 2.下划线字母命名转驼峰命名）",
	  "version": "0.0.1",
	  "publisher": "wen_jk",// 发布者，[创建发布者地址](https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true)
	  "engines": {
		"vscode": "^1.74.0"
	  },
	  "categories": [
		"Other"
	  ],
	  "icon": "images/icon.png",// 插件图片
	  "galleryBanner": {
		"color": "#C80000",
		"theme": "dark"
	  },
	  "license": "MIT",
	  "main": "./dist/extension.js",// 入口 文件
	  "repository": {
		"type": "git",
		"url": ""
	  },
	  "activationEvents": [// 活动事件发生，插件activate将会执行
		"onCommand:wen-humpEffectUnderline.humpToUnderline",
		"onCommand:wen-humpEffectUnderline.underlineToHump"
	  ],
	  "contributes": {// 提供触发事件方式
		"commands": [// Ctrl+Shift+P 输入命令如： HumpToUnderline 触发
		  {
			"command": "wen-humpEffectUnderline.humpToUnderline",
			"title": "HumpToUnderline"
		  },
		  {
			"command": "wen-humpEffectUnderline.underlineToHump",
			"title": "UnderlineToHump"
		  }
		],
		"keybindings": [// 通过快捷键触发
		  {
			"command": "wen-humpEffectUnderline.humpToUnderline",
			"key": "ctrl+alt+q",
			"mac": "cmd+alt+q",
			"when": "editorHasSelection"
		  },
		  {
			"command": "wen-humpEffectUnderline.underlineToHump",
			"key": "ctrl+alt+p",
			"mac": "cmd+alt+p",
			"when": "editorHasSelection"
		  }
		]
	  },
	  "scripts": {
		"vscode:prepublish": "yarn run package",// 打包生产包
		"compile": "webpack",
		"watch": "webpack --watch",// 编译并实时监测变化
		"package": "webpack --mode production --devtool hidden-source-map",
		"compile-tests": "tsc -p . --outDir out",
		"watch-tests": "tsc -p . -w --outDir out",
		"pretest": "yarn run compile-tests && yarn run compile && yarn run lint",
		"lint": "eslint src --ext ts",
		"test": "node ./out/test/runTest.js"
	  },
  }

入口文件extension.ts

// 当插件被激活触发-----------------部分代码
export function activate(context: vscode.ExtensionContext) {

	// 当您的插件被激活时，这行代码只会被执行一次
	console.log('Congratulations, your extension "wen-humpEffectUnderline" is now active!');

	// 驼峰命名 转 下划线命名
	let disposableHump = vscode.commands.registerTextEditorCommand('wen-humpEffectUnderline.humpToUnderline', (textEditor,edit) => {
	
		const selectText = textEditor.document.getText(textEditor.selection);// 获取选中文本
		const changeText = humpToUnderline(selectText);

		edit.replace(textEditor.selection, changeText);

		//vscode.window.showInformationMessage('驼峰命名 转 下划线命名!');

	});

	// 下划线命名 转 驼峰命名
	let disposableUnderline = vscode.commands.registerTextEditorCommand('wen-humpEffectUnderline.underlineToHump', (textEidtor, edit) => {
		const selectText = textEidtor.document.getText(textEidtor.selection);

		const changeText = underlineToHump(selectText);

		edit.replace(textEidtor.selection, changeText);

		//vscode.window.showInformationMessage('下划线命名 转 驼峰命名!');

	});



	context.subscriptions.push(disposableHump);
	context.subscriptions.push(disposableUnderline);

}

// 当插件被停用时触发
export function deactivate() {}

五、运行调试 插件项目

• vscode自带的调试功能，会自动打开一个新窗口vscode并会安装好调试的插件，用于调试

• 修改代码后点击重新运行执行

六、本地安装 Visual Studio Code 管理插件工具与打包

注意： Node.js >= 14.x.x

• 全局安装依赖vsce

npm install -g @vscode/vsce@2.15.0

• 运行打包生成 wen-hump-effect-underline-0.0.1.vsix

// 会运行 yarn run package 中命令内容
vsce package

七、安装wen-hump-effect-underline-0.0.1.vsix包

• 打开vscode 如图点击安装

八、发布到vscode 插件应用商店

使用edge浏览器更方便

1. 注册Microsoft账号 （需要一个邮箱就可） 注册地址

2. 访问 Azure DevOps Azure DevOps

• (1) 创建项目
• (2) 新建发布者登录时需要的 token
• (3) 配置token 信息 (注意保存token)

3. 创建发布者**(注意需要翻墙才能 创建成功)** 发布者创建地址

4. 在项目package.json中配置publisher

5. 发布命令**(需要输入上面获取的token)**

vsce publish

九、插件 代码仓库

gitee代码仓库地址

注意事项

1. 遇到调试执行 打开新窗口vscode找不到测试运行的Ctrl+Shift+p输入的命令 问题 可能是 vscode提示更新，最好先更新vscode编辑器工具