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

相关推荐
在未来等你13 分钟前
Kafka面试精讲 Day 29:版本升级与平滑迁移
大数据·分布式·面试·kafka·消息队列
半生过往30 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听33 分钟前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
讽刺人生74633 分钟前
RFSOC学习记录(二)IP核的整体时钟结构
github
BumBle34 分钟前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
讽刺人生74637 分钟前
RFSOC学习记录(一)RF data converter总览
github
星链引擎37 分钟前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特37 分钟前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle38 分钟前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落38 分钟前
HTML5 音乐敲击乐静态界面
前端