Bigfish VSCode 插件开发指南：零起点开启插件开发

2023-11-07 14:54:09







前天发布了 Bigfish VSCode 插件，开发过程中遇到了不少问题，除了官方文档外，没有一个很好的指南，索性将 VSCode 插件开发过程记录下，让后面的同学可以更好地开发 VSCode 插件，因为篇幅有限，讲清楚得来个系列。

**一、准备工作** 

首先，我们需要安装必要的工具和库。

1. 安装 Node.js 和 npm。
2. 安装 Visual Studio Code。
3. 安装 VSCode 插件开发扩展。

**二、创建插件项目** 

接下来，我们需要创建一个插件项目。

1. 打开 Visual Studio Code。
2. 点击“文件”菜单，然后选择“新建”>“项目”。
3. 在“新建项目”对话框中，选择“VSCode 扩展”模板。
4. 输入插件的名称和，然后点击“创建”。

**三、编写插件代码** 

现在，我们可以开始编写插件代码了。

1. 在插件项目中，打开 package.json 文件。
2. 在 package.json 文件中，添加以下内容：

```json
{
  "name": "bigfish-vscode-plugin",
  "version": "1.0.0",
  "description": "This is a sample VSCode plugin.",
  "main": "./extension.js",
  "activationEvents": ["onStartup"],
  "contributes": {
    "commands": [
      {
        "command": "bigfish-vscode-plugin.helloWorld",
        "title": "Hello World"
      }
    ]
  }
}

在插件项目中，创建 extension.js 文件。
在 extension.js 文件中，添加以下内容：

const vscode = require('vscode');

// 注册命令
vscode.commands.registerCommand('bigfish-vscode-plugin.helloWorld', () => {
  // 显示信息
  vscode.window.showInformationMessage('Hello World!');
});

四、调试和发布插件

现在，我们可以调试和发布插件了。