开始使用

Reactive VSCode 是一个帮助你使用 Vue 的响应式 API 开发 Visual Studio Code 扩展的库。我们假设你已经熟悉了 Vue 响应式 API 的基本概念。

阅读为什么选择 reactive-vscode 了解更多关于创建 reactive-vscode 的原因。

创建新项目

pnpm

pnpm create reactive-vscode

npm

npm init reactive-vscode@latest

yarn

yarn create reactive-vscode

或者你可以通过安装 reactive-vscode 包将其添加到现有项目中。

包导出

该包导出以下内容：

• 实用工具函数和类型，如 defineExtension
• 将 VSCode API 包装为组合式函数，如 useActiveTextEditor
• 来自 @vue/reactivity 的所有导出，如 ref
• 来自 @vue/runtime-core 的对 VSCode 扩展有用的导出，如 watchEffect

你可以在这里找到所有已实现的组合式函数。它们将在未来得到详细文档。

扩展基础

扩展清单 Non-Proprietary

每个 VS Code 扩展都必须有一个作为扩展清单的 package.json。请访问官方文档了解更多信息。

扩展入口文件

通常，扩展入口文件是 src/extension.ts。你可以使用 defineExtension 函数定义你的扩展：

import { defineExtension } from 'reactive-vscode'

export = defineExtension(() => {
  // 在此设置你的扩展
})

我们将在下一节介绍如何编写扩展的主体部分。

开发扩展

1. 打开一个新终端并运行以下命令：

pnpm

pnpm dev

npm

npm run dev

yarn

yarn dev

2. Non-Proprietary 在编辑器中，按下 F5 或从命令面板 (Ctrl+Shift+P) 运行命令 Debug: Start Debugging。这将在新窗口中运行扩展。

访问 VSCode 文档了解更多关于调试扩展的信息。

---

Twoslash 驱动的文档！

你可以悬停在代码块中的标记上以检查它们的类型。这对于文档中未涵盖的细节特别有用。