致新人：如何编写自己的第一个VSCode插件，以使用@vscode/vsce来做打包工具为例

摘要

下面提供一个详细且用户体验良好的VSCode插件开发教程，示范如何创建一个插件，通过命令面板触发跳转到jobleap.cn网站，并使用@vscode/vsce做打包工具的完整流程。

1. 环境准备

安装Node.js，确保版本满足VSCode插件开发需求。
全局安装开发和打包工具：
bash 复制代码
```
npm install -g yo generator-code @vscode/vsce
```

2. 创建插件项目

使用 Yeoman 脚手架创建项目骨架：
bash 复制代码
```
yo code
```
选择 New Extension (TypeScript)，并填写插件名称、描述、作者等基本信息。
进入项目目录后安装依赖：
bash 复制代码
```
cd your-extension-name
npm install
```

3. 编写插件代码实现跳转功能

编辑src/extension.ts，创建可通过命令触发打开jobleap.cn的网址功能：

typescript 复制代码

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.openJobleap', () => {
        vscode.env.openExternal(vscode.Uri.parse('https://jobleap.cn'));
    });
    context.subscriptions.push(disposable);
}

export function deactivate() {}

4. 配置插件的`package.json`

确保命令被正确声明，且定义VSCode版本兼容范围：

json 复制代码

{
  "name": "jobleapjump",
  "displayName": "Jobleap Jump",
  "description": "跳转到Jobleap网站的VSCode插件示例",
  "version": "1.0.0",
  "engines": {
    "vscode": "^1.99.0"
  },
  "activationEvents": [
    "onCommand:extension.openJobleap"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension.openJobleap",
        "title": "打开 Jobleap 网站"
      }
    ]
  }
}

5. 本地调试插件

按F5启动调试，会弹出新的VSCode窗口加载插件。
通过 Ctrl+Shift+P 打开命令面板，搜索"openJobleap"命令，触发后默认浏览器打开 jobleap.cn 。

6. 打包插件

确保全局安装了vsce。
在项目根目录执行：
bash 复制代码
```
vsce package
```
生成后缀为.vsix的插件包文件，可用于手动安装或上传发布。

7. 发布插件（可选）

先申请并创建publisher，登录：
bash 复制代码
```
vsce login <publisherName>
```
发布插件：
bash 复制代码
```
vsce publish
```

以上流程涵盖了从创建、开发、调试、打包到发布插件的全套步骤，示例插件体验点在于通过VSCode命令面板快速跳转网站，简单直观符合良好用户体验标准，且保证了插件对当前VSCode版本（1.99.3及以上）的兼容性。