前言
前段时间做了一个基于命令行的效率工具,可以自动生成组件的模板代码。自己用起来还觉得挺好,但在组内案例几次后大家都不愿意用,究其原因还是命令行工具使用起来门槛有点高,不方便。由于组内已经统一使用VS Code进行开发了,于是决定研究下VS Code的插件开发,让效率工具更方便的用起来。
准备工作
为了降低开发门槛,微软做了一个Yeoman
代码生成命令,可以很方便的生成插件开发需要的模板代码,可以通过以下命令安装:
// 安装
npm install -g yo generator-code
// 使用
yo code
运行完以上命令后会出现下面的操作界面,填入需要的信息即可。
运行示例代码
代码生成后,可以按F5
开始调试插件,此时VS Code会新建一个实例并进入插件开发模式,开发中的插件可以在这个新的实例中使用。模版代码会生成一个名为Hello World
的命令,按下⇧⌘P调出命令输入窗口,然后输入'Hello World'运行命令。如果找不到命令,重启下VS Code再重新运行。
修改代码
插件的入口代码在extension.js
这个文件中,主要是修改activate
函数:
export function activate(context) {
// 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 "my-first-extension" 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('extension.sayHello', () => {
// 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!');
});
context.subscriptions.push(disposable);
}
我插件的功能是用户通过右键点击导航栏,获取选中文件夹的绝对路径,然后提示用户输入新组件的名字,然后自动帮用户生成组件的模板代码。
开发的关键点是如何获取文件夹绝对路径和获取用户输入的组件名。尤其是获取路径,找了很久才找到,官网的文档只字未提。先看代码:
function activate(context) {
console.log('Congratulations, your extension "react-template" is now active!');
// 注册一个名为createFunctionalComponent的命令
const fc = vscode.commands.registerCommand('extension.createFunctionalComponent', function (param) {
// 文件夹绝对路径
const folderPath = param.fsPath;
const options = {
prompt: "请输入组件名: ",
placeHolder: "组件名"
}
// 调出系统输入框获取组件名
vscode.window.showInputBox(options).then(value => {
if (!value) return;
const componentName = value;
const fullPath = `${folderPath}/${componentName}`;
// 生成模板代码,不是本文的重点,先忽略
generateComponent(componentName, fullPath, ComponentType.FUNCTIONAL_COMP);
});
});
context.subscriptions.push(pc);
}
代码很简单,就不做讲解了。为了显示Create Functional Component
这个菜单项,我们需要修改package.json
文件的contributes
字段。activationEvents
字段也要相应的改下。同时为了给插件配一个图标,要加一个icon字段:
"icon": "images/icon.png",
"activationEvents": [
"onCommand:extension.createFunctionalComponent"
],
"contributes": {
"commands": [
{
"command": "extension.createFunctionalComponent",
"title": "Create Functional Component"
}
],
"menus": {
"explorer/context": [
{
"command": "extension.createFunctionalComponent",
"group": "1_modification"
}
]
}
},
详细的contributes
配置可以看这里。配置好menus
之后,registerCommand
的第二个函数参数就能取到文件或文件夹的绝对路径了。
发布插件
插件开发完后就可以发布了,需要安装vsce
npm install -g vsce
安装完后,需要去Azure DevOps注册并生成一个access token。详细的流程可以看这里。生成toke的时候有两个地方需要注意下:
token生成后就可以登录和发布了。如果有任何的修改,要注意修改package.json
里面版本号才能发布成功。发布成功后,很快就能在VS Code的插件市场搜到了。
总结
本文介绍了VS Code插件开发的基本流程,实现了一个简单的插件。本文只涉及到VS Code插件系统的冰山一角,更多的高级功能以后接触到的时候再作介绍。如果想再作进一步的了解,可以从这里开始。更多的 VS Code 开发技巧,可以看这个系列的第二篇:VS Code插件开发介绍(二)