VSCode 插件开发入门：从零构建你的第一个 skill 插件

4次阅读

共计 2855 个字符，预计需要花费 8 分钟才能阅读完成。

VSCode 插件开发需要准备以下环境：

Node.js：建议安装 LTS 版本（如 16.x 或更高），确保 npm 或 yarn 可用。
VSCode：推荐使用最新稳定版，确保插件开发工具链支持。
Yeoman 和 VSCode 插件生成器 ：通过以下命令安装脚手架工具：

npm install -g yo generator-code

安装完成后，运行 yo code 按提示选择插件类型（这里选 “New Extension (TypeScript)”）。

生成的项目主要包含以下文件：

package.json：插件的核心配置文件，重点关注：
activationEvents：定义插件何时被激活（例如 onCommand）
contributes.commands：注册插件提供的命令
main：指定入口文件（通常是 ./out/extension.js）
src/extension.ts：插件主逻辑文件，包含：
activate 函数：插件激活时执行
deactivate 函数：插件卸载时执行（可选）

在 package.json 中添加命令声明：

"contributes": {
  "commands": [{
    "command": "mySkill.helloWorld",
    "title": "Say Hello"
  }]
}

在 extension.ts 中实现命令逻辑：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {const command = vscode.commands.registerCommand('mySkill.helloWorld', () => {vscode.window.showInformationMessage('Hello from MySkill!');
  });
  context.subscriptions.push(command);
}

const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
statusBarItem.text = "$(zap) MySkill";
statusBarItem.command = "mySkill.helloWorld";
statusBarItem.show();
context.subscriptions.push(statusBarItem);

const input = await vscode.window.showInputBox({
  placeHolder: 'Enter your skill level',
  validateInput: text => {return isNaN(Number(text)) ? 'Please enter a number' : null;
  }
});
if (input) {vscode.window.showInformationMessage(`Your skill level is ${input}`);
}

以下是一个简单的 skill 评分插件实现：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册主命令
  const rateCommand = vscode.commands.registerCommand('skill.rate', async () => {
    const input = await vscode.window.showInputBox({prompt: 'Rate your coding skill (1-10)',
      validateInput: value => {const num = Number(value);
        if (isNaN(num)) return 'Please enter a number';
        if (num < 1 || num > 10) return 'Please enter between 1 and 10';
        return null;
      }
    });

    if (input) {const rating = Number(input);
      const message = rating >= 8 
        ? 'You\'re a pro! 🎯' 
        : `Keep practicing! You rated yourself ${rating}/10`;

      vscode.window.showInformationMessage(message);
    }
  });

  // 创建状态栏按钮
  const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
  statusBarItem.text = "$(star) Rate Skill";
  statusBarItem.command = "skill.rate";
  statusBarItem.tooltip = "Click to rate your coding skill";
  statusBarItem.show();

  context.subscriptions.push(rateCommand, statusBarItem);
}

记得在 package.json 中添加相应的命令和激活事件配置。