vscode插件开发

1.vscode插件开发官方文档地址

https://www.bookstack.cn/read/CN-VScode-Docs/README.md

2.vscode插件脚手架

全局安装vscode插件脚手架命令和代码生成器

npm install -g yo generator-code

生成vscode脚手架项目

yo code

3.开发

打开vscode插件项目，f5运行项目，ctrl+shift+p 输入默认命令 test.helloWorld，vscode出现弹窗 Hello World from vscode插件项目名!

extension.ts进行相应命令函数的编写

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log('Congratulations, your extension "test" is now active!');// The command has been defined in the package.json file// Now provide the implementation of the command with registerCommand// The commandId parameter must match the command field in package.jsonlet disposable = vscode.commands.registerCommand('test.helloWorld', () => {// The code you place here will be executed every time your command is executed// Display a message box to the uservscode.window.showInformationMessage('Hello World from space-delete-test!');});context.subscriptions.push(disposable);
}// this method is called when your extension is deactivated
export function deactivate() { }

完成新命令后需要修改package.json

{"name": "test","displayName": "space-delete-test","description": "space-delete","version": "0.0.1","engines": {"vscode": "^1.60.0"},"categories": ["Other"],"activationEvents": [    // vscode拓展的激活事件   "onCommand:test.h"    // 此处需要修改为extension.ts对应的命令名],"main": "./dist/extension.js","contributes": {"commands": [                  // 为命令行提供命令{"command": "test.h",   // 此处需要修改为extension.ts对应的命令名"title": "Hello World" // 命令输入时显示的标题}]},"scripts": {"vscode:prepublish": "npm run package","compile": "webpack","watch": "webpack --watch","package": "webpack --mode production --devtool hidden-source-map","test-compile": "tsc -p ./","test-watch": "tsc -watch -p ./","pretest": "npm run test-compile && npm run lint","lint": "eslint src --ext ts","test": "node ./out/test/runTest.js"},"devDependencies": {"@types/vscode": "^1.60.0","@types/glob": "^7.1.3","@types/mocha": "^8.2.2","@types/node": "14.x","eslint": "^7.27.0","@typescript-eslint/eslint-plugin": "^4.26.0","@typescript-eslint/parser": "^4.26.0","glob": "^7.1.7","mocha": "^8.4.0","typescript": "^4.3.2","vscode-test": "^1.5.2","ts-loader": "^9.2.2","webpack": "^5.38.1","webpack-cli": "^4.7.0"}
}

vscode插件的运行步骤

注册onCommand激活事件，在输入命令后激活插件
使用contributes.commands对命令行提供命令
使用commands.registerCommand将一个函数绑定到命令上

4.获取token和注册publisher

必须具备token才能提交vscode插件至vscode商店中
注册地址
https://dev.azure.com

步骤一，注册微软账户

步骤二，登录后点击个人信息，创建新组织

步骤三，点击人物头像，选择personal access token，选择所有组织，选择custom define，full access，生成token后记得保管，token忘记只能重新注册，无法找回

步骤四，注册成为publisher，需要科学上网，这一步我卡了半天，才反应过来

https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true

5.上传插件

上传插件全局命令

npm install -g vsce

想要上传vscode商店，需要进行开发者账户登录

vsce  login   你的publisher名

输入token

登陆成功后

vsce publish 你的插件版本号

注意：每一次提交的版本号都要跟以前的版本号不同，可以手动修改package.json里的版本号或者vsce publish patch自增版本号

如果你只想插件本地打包

vsce package

本地打包完成后生成visx文件，vscode插件中导入该visx文件，即可本地生效插件