从零开发一个vscode插件

 环境准备

• nodejs建议使用 LTS 版本
• yeoman脚手架工具

npm install -g yo

• generator-codeVSCode代码生成器

npm install -g generator-code

搭建环境

执行下面代码

yo code

通过yo code生成插件开发项目，这里官方推荐使用TypeScript，当然我们更熟悉javascript，可根据自身实际情况选择。

执行后会提示几个问题，第一个问题我们选择New Extension (TypeScript)，创建使用TypeScript开发的扩展插件。（可以使用 yo code 来创建插件、主题、语言支持、代码片段、语言支持、键盘映射、插件包）

填写完成后，会自动创建文件夹并帮助初始化完成文件，我们先来看下目录结构。

my-extension/
├── .vscode/
├── src/
│   └── extension.ts
├── package.json
├── tsconfig.json
└── ...

• src/extension.ts: 插件的主要代码
• package.json: 插件的配置文件

通过VSCode打开刚生成的插件项目，在这些文件中，有两个重点：

extension.js是插件的入口文件

package.json包含插件的配置信息（插件命令、快捷键、菜单均在此配置）

准备完成后，为了先验证下插件项目正常OK，在VSCode中F5运行（或Debug->start）如果你可以看到VSCode又启动了一个窗口运行插件项目,shift+ctrl+p 输入Hello World如果在右下角能看到Hello World的提示信息就OK 了。（运行前需要npm run compile 或者运行 npm run watch，运行npm run watch后在开发窗口键入command r即可刷新代码）

实现插件功能

打开 src/extension.ts,你会看到两个主要函数:

• activate: 插件激活时调用
• deactivate: 插件停用时调用

让我们实现一个简单的功能: 添加一个命令来插入当前时间。

修改 activate 函数如下:

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('myExtension.insertDateTime', () => {
    const editor = vscode.window.activeTextEditor;
    if (editor) {
      const currentDateTime = new Date().toLocaleString();
      editor.edit(editBuilder => {
        editBuilder.insert(editor.selection.active, currentDateTime);
      });
    }
  });

  context.subscriptions.push(disposable);
}

注册命令

在 package.json 文件中,添加以下内容:

"contributes": {
  "commands": [
    {
      "command": "myExtension.insertDateTime",
      "title": "Insert Date and Time"
    }
  ]
}

测试插件

1. 按 F5 键启动调试(mac键盘可以

   

   )。
2. 在新打开的 VS Code 窗口中,按 Ctrl+Shift+P (或 Cmd+Shift+P on Mac) 打开命令面板。
3. 输入 "Insert Date and Time" 并执行命令。

发布插件

发布 VS Code 插件到 Visual Studio Code Marketplace 是一个多步骤的过程，涉及到打包、注册和上传。以下是发布插件的详细步骤：

步骤 1: 准备你的插件

确保你的插件代码是完整的，所有功能都经过了充分测试。你的 package.json 文件应该包含所有必要的字段，如 name, version, publisher, engines, main 以及 activationEvents。

步骤 2: 创建一个发布者账号

1. 访问 Visual Studio Marketplace 管理门户。
2. 如果你还没有 Microsoft 账号，你需要先创建一个。
3. 登录后，选择 "Publish Extensions"（发布扩展）。
4. 创建发布者身份：点击 "New Publisher" 并填写相关信息，如发布者 ID 和显示名称。这个 ID 是唯一的，会被用来识别你的插件。

步骤 3: 获取个人访问令牌

1. 登录到你的 Azure DevOps 账户。
2. 导航到用户设置，然后选择 "Personal access tokens"（个人访问令牌）。
3. 点击 "New Token"。
4. 选择适当的组织，设置 "Show All Scopes"，滚动到 "Marketplace"，选择管理（Manage）。
5. 设置过期时间，并创建令牌。

步骤 4: 安装 VSCE

VSCE（Visual Studio Code Extensions）是一个命令行工具，用于管理 VS Code 扩展的发布。在你的命令行工具中运行以下命令来安装它：

npm install -g vsce

步骤 5: 登录 VSCE

使用 VSCE 登录到你的发布者账户：

vsce login [publisher-name]

这里的 [publisher-name] 是你在步骤 2 中创建的发布者 ID。在提示输入时，粘贴你在步骤 3 中创建的个人访问令牌。

步骤 6: 打包和发布插件

1. 打包插件（可选，用于检查打包后的内容）：这会创建一个 .vsix 文件，你可以检查这个文件来确保所有必要的文件都包含在内。

vsce package

1. 发布插件：这个命令会将你的插件上传到 Visual Studio Marketplace。

vsce publish

步骤 7: 更新插件

如果你需要更新插件，修改代码后，增加 package.json 中的版本号，然后运行：

vsce publish

注意事项

• 确保遵循所有社区指南和市场政策。
• 考虑为你的插件编写良好的文档，包括 README 文件，这有助于用户了解和使用你的插件。

发布完成后，你的插件将在 Visual Studio Marketplace 上可见，并可供所有 VS Code 用户下载和安装。

over!