你的第一个扩展#

在本主题中，我们将教你构建扩展的基本概念。确保你已安装 Node.js 和 Git。

首先，使用 Yeoman 和 VS Code 扩展生成器搭建一个准备好进行开发的 TypeScript 或 JavaScript 项目。

• 如果你不想为以后使用安装 Yeoman，请运行以下命令：

npx --package yo --package generator-code -- yo code  

• 如果你想全局安装 Yeoman 以便于重复运行，请运行以下命令：

npm install --global yo generator-code  
yo code  

对于 TypeScript 项目，填写以下字段：

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? HelloWorld
? What's the identifier of your extension? helloworld
? What's the description of your extension? 
? Initialize a git repository? Yes
? Which bundler to use? unbundled
? Which package manager to use? pnpm

在编辑器中，打开 src/extension.ts 并按 F5 或从命令面板运行 Debug: Start Debugging 命令(⇧⌘P (Windows, Linux Ctrl+Shift+P))。这将编译扩展并在新的 扩展开发宿主 窗口中运行它。

在新窗口中从命令面板(⇧⌘P (Windows, Linux Ctrl+Shift+P))运行 Hello World 命令：

你应该会看到 Hello World from HelloWorld! 通知显示出来。成功！

如果你在调试窗口中看不到 Hello World 命令，请检查 package.json 文件并确保 engines.vscode 版本与已安装的 VS Code 版本兼容。

扩展剖析#

在上一个主题中，你已经能够运行一个基本的扩展。它在底层是如何工作的呢？

Hello World 扩展做了3件事：

• 注册 onCommand 激活事件：onCommand:helloworld.helloWorld，这样当用户运行 Hello World 命令时扩展就会被激活。

注意： 从 VS Code 1.74.0 开始，在 package.json 的 commands 部分声明的命令会在调用时自动激活扩展，而不需要在 activationEvents 中显式添加 onCommand 条目。

• 使用 contributes.commands 贡献点 使 Hello World 命令在命令面板中可用，并将其绑定到命令ID helloworld.helloWorld。
• 使用 commands.registerCommand VS Code API 将一个函数绑定到已注册的命令ID helloworld.helloWorld。

理解这三个概念对于在 VS Code 中编写扩展至关重要：

• 激活事件：使你的扩展变为活动状态的事件。
• 贡献点：你在 package.json 扩展清单中声明的静态声明，用于扩展 VS Code。
• VS Code API：一组你可以在扩展代码中调用的 JavaScript API。

一般来说，你的扩展会使用贡献点和 VS Code API 的组合来扩展 VS Code 的功能。扩展功能概述主题可以帮助你为扩展找到合适的贡献点和 VS Code API。

让我们仔细看看 Hello World 示例的源代码，看看这些概念如何应用于它。

.
├── .vscode
│   ├── launch.json     // 启动和调试扩展的配置
│   └── tasks.json      // 编译 TypeScript 的构建任务配置
├── .gitignore          // 忽略构建输出和 node_modules
├── README.md           // 扩展功能的可读描述
├── src
│   └── extension.ts    // 扩展源代码
├── package.json        // 扩展清单
├── tsconfig.json       // TypeScript 配置

{
  "name": "helloworld-sample",
  "displayName": "helloworld-sample",
  "description": "HelloWorld example for VS Code",
  "version": "0.0.1",
  "publisher": "vscode-samples",
  "repository": "https://github.com/microsoft/vscode-extension-samples/helloworld-sample",
  "engines": {
    "vscode": "^1.51.0"
  },
  "categories": ["Other"],
  "activationEvents": [],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "helloworld.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./"
  },
  "devDependencies": {
    "@types/node": "^8.10.25",
    "@types/vscode": "^1.51.0",
    "tslint": "^5.16.0",
    "typescript": "^3.4.5"
  }
}

// 模块 'vscode' 包含 VS Code 扩展 API
// 导入模块并在下面的代码中使用别名 vscode 引用它
import * as vscode from 'vscode';

// 当你的扩展被激活时调用此方法
// 你的扩展在第一次执行命令时被激活
export function activate(context: vscode.ExtensionContext) {
  // 使用控制台输出诊断信息（console.log）和错误（console.error）
  // 这行代码只会在你的扩展被激活时执行一次
  console.log('恭喜，你的扩展 "helloworld-sample" 现在已激活！');

  // 命令已在 package.json 文件中定义
  // 现在使用 registerCommand 提供命令的实现
  // commandId 参数必须与 package.json 中的 command 字段匹配
  let disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
    // 你在这里放置的代码将在每次执行命令时执行

    // 向用户显示消息框
    vscode.window.showInformationMessage('Hello World!');
  });

  context.subscriptions.push(disposable);
}

// 当你的扩展被停用时调用此方法
export function deactivate() {}