从头开始构建自己的 Visual Studio Code 扩展程序：初学者指南

2023-11-10 06:43:35

作为一名开发人员，您是否有过希望增强 Visual Studio Code (VSCode) 以满足您的特定需求的时刻？开发自己的扩展程序是一种强大而令人满意的方式，可以让您定制和改进您最喜欢的代码编辑器。本文将指导您完成从头开始开发 VSCode 扩展程序的完整过程，让您深入了解其功能。

准备工作：

, , ,
Node.js 和 npm（Node.js 包管理器）
对 TypeScript 或 JavaScript 的基本了解

1. 创建扩展程序脚手架：

使用 Yeoman 生成器快速启动您的扩展程序项目：

npm install -g yo generator-code
yo code

2. 编写扩展程序代码：

在 src 文件夹中编辑 extension.ts 文件，使用 TypeScript 定义您的扩展程序：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册命令
  context.subscriptions.push(
    vscode.commands.registerCommand('myextension.helloWorld', () => {
      // 执行命令的逻辑
      vscode.window.showInformationMessage('Hello World!');
    })
  );
}

export function deactivate() {}

3. 定义扩展程序元数据：

在 package.json 文件中指定扩展程序元数据：

{
  "name": "myextension",
  "displayName": "My Extension",
  "publisher": "YourName",
  "version": "1.0.0",
  "description": "My VSCode extension.",
  "activationEvents": ["onCommand:myextension.helloWorld"],
  "main": "./src/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "myextension.helloWorld",
        "title": "Hello World"
      }
    ]
  }
}