或许你觉得文件目录嘛，一看就知道了，不就是几个配置信息或者项目说明嘛，但是这里面的配置信息「非常重要」x3，重要到你可能少一个配置或者配置的不对，功能就出不来。所以我们还是稍微花点笔墨聊聊这里的信息。
首先你可以在 package.json 文件里面，看到自己在前一个步骤里面设置的各个值，配置内的各个主要的含义如下，这里有个小点注意一下，如果你的 VS Code 比较旧，且更新不了最新的，你就把下面的 engines 设置的版本低一点，比如我就改成了 ^1.52.0 确保一定能兼容目前的 VS Code 编辑器就可以 :
{
"name": "test-extension", // 插件的名字
"displayName": "test-extension", // 在插件市场展示的名字
"description": "vscode extension sample", // 插件描述
"version": "0.0.1", // 插件版本
"engines": { // 最低支持 vscode 的版本
"vscode": "^1.52.0"
},
"categories": [ // 插件的类别，用于在插件市场做区分
"Other"
],
"activationEvents": [ // 插件激活的事件列表，可以有多个触发机制，所以是数组形式
"onCommand:test-extension.helloWorld"
],
"main": "./extension.js", // 插件主入口
"contributes": { // 贡献点，用于拓展插件功能的配置项，这里不会细讲，先用 command 举例
"commands": [
{
"command": "test-extension.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"lint": "eslint .",
"pretest": "npm run lint",
"test": "node ./test/runTest.js"
},
"devDependencies": {
"@types/vscode": "^1.55.0",
"@types/glob": "^7.1.3",
"@types/mocha": "^8.0.4",
"@types/node": "^12.11.7",
"eslint": "^7.19.0",
"glob": "^7.1.6",
"mocha": "^8.2.1",
"typescript": "^4.1.3",
"vscode-test": "^1.5.0"
}
}
熟悉了配置之后，我们再来看一下插件的入口文件 extsnsion.js ，里面主要有两个主要的函数，一个是 activate 表示激活插件时的处理，一般是注册命令等一些初始化的操作；另一个是 deactivate ，表示插件失活的时候做的处理，其实听名字你也应该有体感，这就是插件的生命周期里的两个钩子函数嘛。
// 引了 vscode 这个模块，这样你就可以用它里面的很多很多功能啦
const vscode = require('vscode');
/**
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
console.log('Congratulations, your extension "test-extension" is now active!');
let disposable = vscode.commands.registerCommand('test-extension.helloWorld', function () {
vscode.window.showInformationMessage('Hello World from test-extension!');
});
context.subscriptions.push(disposable);
}
function deactivate() {}
module.exports = {
activate,
deactivate
}
我们来分析一下上面这段代码，你可以看到里面 registerComman 了一个命令，是不是有种似曾相识的感觉？没错，就是上面在 package.json 里面有提到的那个 command，让我们摘出来一起看看：
...,
// package.json
"contributes": { // 贡献点，用于拓展插件功能的配置项，这里不会细讲，先用 command 举例
"commands": [
{
"command": "test-extension.helloWorld",
"title": "Hello World"
}
]
},
...
...
// extension.js
function activate(context) {
console.log('Congratulations, your extension "test-extension" is now active!');
let disposable = vscode.commands.registerCommand('test-extension.helloWorld', function () {
vscode.window.showInformationMessage('Hello World from test-extension!');
});
context.subscriptions.push(disposable);
}
...
这样看起来是不是很直观了？在 package.json 里面设置的 command 的值，就是 extension.js 里面 registerCommand 的值。那这几行命令是什么意思呢？让我们一起来运行看看：
他会帮你打开一个新的 VS Code 编辑器，插件只会加载到这个编辑器中。现在我们使用调用快捷键（MacOS） command+p ，输入 >Hello World （不区分大小写）：
回车一下，你会发现在右下角一个不起眼的角落里输出了这么一个提示：
我相信聪明的你们结合代码一定已经恍然大悟了对不对！不知道你们有没有这个疑问，上面那个 console.log 去哪里看？别急，我们回到插件代码的那个编辑器中，仔细看下面这边，他会在我们输入上面的命令之后才出现，因为在 package.json 里面我们配置插件的激活时机就是 onCommand:test-extension.helloWorld ：
那我们现在抱着「刻意学习」的思路，改一下上面的代码，比如把 test-extension 改成 test ：
...,
// package.json
"activationEvents": [
"onCommand:test.helloWorld"
],
...,
"contributes": {
"commands": [
{
"command": "test.helloWorld",
"title": "Hello World"
}
]
},
...
// extension.js
...
function activate(context) {
console.log('我在这里！！');
let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
vscode.window.showInformationMessage('我改变了 command 的名字!');
});
context.subscriptions.push(disposable);
}
...
再按照上面说的触发方法再来一遍，发现依旧是可以的！所以这里的名字只是一个命名空间，你可以改成你想要的任何名字，来适用于比较复杂的插件体系。既然是个命名空间，那其实不要这个前缀也可以。
五、实现一个属于自己的插件
前面介绍了那么多，大家有没有发现其实这个体系也不难，有大佬在前面铺路，其实我们只要按照规则“填空”就好了，那现在我们就来实现一个小小的功能——加一个按钮和他的点击事件。
修改我们的 package.json 如下，因为当前我希望插件加载的时候就已经订阅了按钮的点击事件，所以这里我们可以把 activationEvents 改成 *，这样的话我们的插件在一开始就可以激活并注册事件了：
...,
"activationEvents": [
"*",
],
"contributes": {
"commands": [
{
"command": "test.helloWorld",
"title": "Hello World"
},
// 注册一下按钮点击的事件，再配一个小图标
{
"command": "test.button",
"title": "按钮",
"icon": {
"light": "./media/light/preview.svg",
"dark": "./media/dark/preview.svg"
}
}
],
// 在这里加一下下面这个配置
"menus": {
"editor/title": [
{
"command": "test.button",
"group": "navigation"
}
]
}
},
...
然后回到我们的 extension.js 里面增加一个简单的消息提醒：
function activate(context) {
console.log('我在这里！！');
let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
vscode.window.showInformationMessage('我改变了 command 的名字!');
});
// 新增一个按钮的点击命令操作内容
let button = vscode.commands.registerCommand('test.button', function () {
vscode.window.showInformationMessage('按钮点击');
});
// 记得这个新的命令也要放进去订阅一下
context.subscriptions.push(disposable, button);
}
看一下效果：
是不是很简单的就自定义了 VS Code 的样式？那我们现在就来分析一下我们上面做的事情。首先，我们修改了 package.json 里的配置，增加了一个 menus ，这个 menus 是什么呢？答案是菜单。菜单项定义包含选择时应调用的命令以及该项应显示的条件（when），所以你也可以给这个菜单项显示加个显示的逻辑，比如我们规定在打开 javascript 文件时才显示这个按钮：
{
"contributes": {
"menus": {
"editor/title": [
{
"when": "resourceLangId == javascript",
"command": "test.button",
"group": "navigation"
}
]
}
}
}
USB Microphone https://www.soft-voice.com/
Wooden Speakers https://www.zeshuiplatform.com/
亚马逊测评 www.yisuping.cn
深圳网站建设www.sz886.com