致新人:如何编写自己的第一个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及以上)的兼容性。

相关推荐
AI视觉网奇28 分钟前
rknn yolo11 推理
前端·人工智能·python
gplitems12328 分钟前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
wyzqhhhh3 小时前
less和sass
前端·less·sass
CoderJia程序员甲4 小时前
GitHub 热榜项目 - 日榜(2025-10-01)
ai·开源·github·ai编程·github热榜
Nan_Shu_6145 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel6 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始6 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible6 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫6 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评7 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5