前言前段时间做了一个基于命令行的效率工具，可以自动生成组件的模板代码。自己用起来还觉得挺好，但在组内案例几次后大家都不愿意用，究其原因还是命令行工具使用起来门槛有点高，不方便。由于组内已经统一使用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这个文件中，主要是修改avtivate函数：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插件系统的冰山一角，更多的高级功能以后接触到的时候再作介绍。如果想再作进一步的了解，可以从这里开始。