vscode插件开发流程

永远不会太晚

已于 2022-04-08 17:46:02 修改

阅读量5k

点赞数 3

分类专栏： vscode 文章标签： vscode

于 2021-09-30 15:08:09 首次发布

本文链接：https://blog.csdn.net/qq_42611074/article/details/120566709

版权

vscode 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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 activated
	console.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.json
	let 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 user
		vscode.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"
	}
}