vscode插件构建与打包安装

1、使用微软官方的脚手架搭建插件框架

https://github.com/Microsoft/vscode-generator-code

JavaScript
npm install -g yo generator-code

JavaScript
yo code

2、主要配置说明与运行

package.json

JavaScript
{
        // 扩展的激活事件
    \"activationEvents\": [
        \"onCommand:extension.sayHello\"
    ],
        // 入口文件
    \"main\": \"./src/extension\",
        // 贡献点，vscode插件大部分功能配置都在这里
    \"contributes\": {
        \"commands\": [
            {
                \"command\": \"extension.sayHello\",
                \"title\": \"Hello World\"
            }
        ]
    }
}

extension.js

JavaScript
// The module \'vscode\' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require(\'vscode\');

// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed

/**
 * @param {vscode.ExtensionContext} context
 */
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(\'恭喜，您的扩展“vscode-plugin-demo”已被激活！\');

  // 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
  const disposable = vscode.commands.registerCommand(\'yapi-to-code.helloWorld\', function () {
    // 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 yapi-to-code!\');
  });

  context.subscriptions.push(disposable);
}

// This method is called when your extension is deactivated
function deactivate() {}

module.exports = {
  activate,
  deactivate
}

3、打包

JavaScript
npm i
npm i vsce

JavaScript
vsce package

打包完成后会在项目路径下生成一个vsix的文件

4、安装插件

点击扩展，选中从vsix安装

选择刚才打包生成的vsix文件，安装完成如下图

遇到的问题

1、打包时出现 Make sure to edit the README.md file before you package or publish your extension.

修改README.md 去掉README.md上的readme的文字

2、打包的时候不要加--no-dependencies。用这个命令会导致打出来的vsix在安装后出现command \'\' not found

参考

https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html

发布插件 | VS Code 插件开发中文文档

Webview API | VS Code 插件开发中文文档