M

MLOG

中文

通过学习构建自定义扩展，释放 VS Code 的强大功能。本指南提供了从设置到发布的完整流程，助您增强编码环境，并与世界分享您的创作。

精通VS Code扩展开发：面向全球开发者的综合指南

Visual Studio Code (VS Code) 已成为全球数百万开发者的首选代码编辑器。其广受欢迎源于其轻量化的特性、强大的功能，以及最重要的——可扩展性。创建自定义扩展的能力使开发者能够根据自己的特定需求定制编辑器，从而提高生产力并简化工作流程。这份综合指南将引导您完成创建自己VS Code扩展的全过程，从初始设置到发布您的作品供全世界使用。

为什么要开发VS Code扩展？

开发VS Code扩展为个人开发者和组织都带来了诸多好处：

前提条件

在深入扩展开发之前，请确保您已安装以下软件：

设置您的开发环境

在前提条件准备就绪后，您就可以设置您的开发环境了：

  1. 创建新的扩展项目：打开您的终端并运行以下命令来启动扩展生成器：
    2. yo code
  2. 回答提示问题：生成器会询问一系列关于您扩展的问题。以下是常见提示及其推荐答案的分解：
    • 您想创建哪种类型的扩展？选择“New Extension (TypeScript)”来创建一个基于TypeScript的扩展，这是推荐的方法。
    • 您的扩展名称是什么？为您的扩展选择一个描述性且唯一的名称。例如：“Code Spell Checker”、“JavaScript Snippets”、“Python Autocomplete”。
    • 您的扩展标识符是什么？这是您扩展的唯一标识符，通常格式为 `publisher.extension-name`。选择一个发布者名称（例如，您的GitHub用户名或公司名）。
    • 您的扩展描述是什么？提供一个简洁明了的描述，说明您的扩展的功能。
    • 初始化一个git仓库吗？选择“Yes”以初始化一个Git仓库进行版本控制。
    • 您想使用eslint来检查代码吗？选择“Yes”以强制执行代码风格一致性。
  3. 在VS Code中打开项目：生成器完成后，在VS Code中打开新创建的项目文件夹。

理解项目结构

扩展生成器创建了一个基本的项目结构，包含以下关键文件：

编写您的第一个扩展

我们从创建一个简单的扩展开始，当执行命令时显示一条“Hello World”消息：

  1. 打开 `src/extension.ts`：此文件包含 `activate` 函数，该函数在您的扩展被激活时调用。
  2. 修改 `activate` 函数：将现有代码替换为以下内容：
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension \"my-extension\" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. 说明：
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`：注册一个ID为 `my-extension.helloWorld` 的命令。此命令将在VS Code命令面板中可用。
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`：在VS Code窗口中显示一条信息消息。
    • `context.subscriptions.push(disposable)`：将命令添加到扩展的订阅中，确保在扩展停用时能被正确处理。
  4. 修改 `package.json`：将以下内容添加到 `contributes` 部分以定义该命令：
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. 说明：
    • `"commands"`：定义您的扩展所贡献的命令。
    • `"command": "my-extension.helloWorld"`：指定与 `extension.ts` 中使用的ID匹配的命令ID。
    • `"title": "Hello World"`：设置命令在命令面板中的显示名称。

测试您的扩展

现在是时候测试您的扩展了：

  1. 按 F5：这将启动一个新的VS Code窗口，并安装了您的扩展。这就是“扩展开发宿主”。
  2. 打开命令面板：按 `Ctrl+Shift+P`（在macOS上为 `Cmd+Shift+P`）打开命令面板。
  3. 输入“Hello World”：您应该会在命令面板中看到您的命令。
  4. 选择“Hello World”：点击该命令将执行它，并在VS Code窗口中显示“Hello World”消息。

调试您的扩展

调试对于识别和修复扩展中的问题至关重要。VS Code提供了出色的调试支持：

  1. 设置断点：在编辑器中代码行号旁边的边栏单击以在代码中设置断点。
  2. 按 F5：这将在调试模式下启动扩展开发宿主。
  3. 触发您的扩展：执行触发您想要调试的代码的命令或操作。
  4. 检查变量和调用堆栈：VS Code调试器将在您的断点处暂停执行，允许您检查变量、单步执行代码并查看调用堆栈。

使用 VS Code API

VS Code API 提供了一套丰富的接口和函数，用于与编辑器进行交互。以下是 API 的一些关键领域：

示例：创建一个代码片段扩展

我们来创建一个扩展，添加一个用于创建基本React组件的代码片段：

  1. 创建 `snippets` 文件夹：在项目根目录下创建一个名为 `snippets` 的新文件夹。
  2. 创建片段文件：在 `snippets` 文件夹内创建一个名为 `react.json` 的文件。
  3. 添加片段定义：将以下JSON添加到 `react.json` 中：
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. 说明：
    • `"React Component"`：片段的名称。
    • `"prefix": "reactcomp"`：触发片段的前缀。输入 `reactcomp` 并按 `Tab` 键将插入此片段。
    • `"body"`：一个字符串数组，代表片段中的代码行。
    • `${1:ComponentName}`：一个制表符停止位，允许您快速更改组件名称。
    • `"description"`：片段的描述。
  5. 修改 `package.json`：将以下内容添加到 `contributes` 部分：
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. 说明：
    • `"snippets"`：定义您的扩展所贡献的片段。
    • `"language": "javascriptreact"`：指定该片段适用的语言。
    • `"path": "./snippets/react.json"`：指定片段文件的路径。
  7. 测试您的片段：打开一个 `.jsx` 或 `.tsx` 文件并输入 `reactcomp`。按 `Tab` 键插入片段。

高级扩展开发技术

一旦您掌握了基础知识，就可以探索更高级的扩展开发技术：

国际化与本地化 (i18n 和 L10n)

为了覆盖全球用户，请考虑对您的扩展进行国际化和本地化。这涉及到调整您的扩展以支持不同的语言和地区。

发布您的扩展

一旦您的扩展准备就绪，您可以将其发布到VS Code市场供他人使用：

  1. 创建一个 Azure DevOps 组织：您需要一个 Azure DevOps 组织来发布您的扩展。如果您没有，请在 Azure DevOps 网站上创建一个免费帐户。
  2. 安装 `vsce` 工具：VS Code 扩展管理器 (`vsce`) 是一个用于打包和发布扩展的命令行工具。使用 npm 全局安装它：
    3. npm install -g vsce
  3. 创建一个发布者：发布者是您在市场上的扩展的所有者身份。使用 `vsce create-publisher` 命令创建一个发布者。您需要提供一个发布者名称和一个来自Azure DevOps的个人访问令牌 (PAT)。
  4. 生成个人访问令牌 (PAT)：在 Azure DevOps 中，转到“用户设置” -> “个人访问令牌”，并创建一个具有“市场(发布)”范围的新 PAT。
  5. 打包您的扩展：使用 `vsce package` 命令将您的扩展打包成一个 `.vsix` 文件。
  6. 发布您的扩展：使用 `vsce publish` 命令将您的扩展发布到市场。您需要提供您的发布者名称和您的PAT。

扩展开发最佳实践

遵循这些最佳实践来创建高质量且可维护的VS Code扩展：

社区资源

以下是一些用于学习更多关于VS Code扩展开发的宝贵资源：

结论

开发VS Code扩展是定制您的编码环境、提高生产力并与全球开发者社区分享您的解决方案的强大方式。通过遵循本综合指南，您可以掌握扩展开发的艺术，并创造出能增强您自己和他人VS Code体验的创新工具。记住拥抱社区，为开源项目做贡献，并在不断发展的VS Code扩展开发世界中持续学习和探索。祝您好运，编码愉快！