实现一个简单的hello world vs-code插件

开发 VS Code 插件可以让你扩展编辑器的功能,从简单的代码片段到复杂的语言支持都可以实现。

一、环境准备

  1. 安装工具

    • 安装 Node.js(v14+,需要 npm 或 yarn)

    • 安装 VS Code

    • 安装 Yeoman 和 VS Code 插件生成器:

      bash 复制代码
      npm install -g yo generator-code
  2. 创建插件项目 运行 yo code,选择插件类型(如 New Extension (JavaScript)TypeScript),填写项目信息(名称、描述、标识符等),生成基础项目结构。

二、核心项目结构

生成的项目包含以下关键文件:

bash 复制代码
your-extension/
├── src/
│   └── extension.js      # 插件入口逻辑
├── package.json          # 插件配置(核心文件)
├── README.md             # 插件说明
└── .vscode/              # 调试配置
  • package.json:定义插件的激活事件、贡献点(命令、菜单等)、依赖等,是插件的「身份证」。
  • extension.js :实现插件功能的代码,入口为 activate 函数(插件激活时执行)和 deactivate 函数(插件销毁时执行)。

三、开发Hello World 功能

  1. 配置 package.json :在 contributes.commands 中注册命令,在 activationEvents 中定义激活事件(如命令被调用时激活):
json 复制代码
{
  "activationEvents": ["onCommand:your-extension.helloWorld"],
  "contributes": {
    "commands": [
      {
        "command": "your-extension.helloWorld",
        "title": "Hello World"
      }
    ]
  }
}
  1. 实现功能(extension.js) :在 activate 函数中注册命令的回调:
js 复制代码
const vscode = require('vscode');

function activate(context) {
  // 注册命令
  let disposable = vscode.commands.registerCommand('your-extension.helloWorld', () => {
    // 显示弹窗
    vscode.window.showInformationMessage('Hello VS Code Extension!');
  });

  context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = { activate, deactivate };

四、调试插件

  1. F5 启动「扩展开发宿主」窗口(一个新的 VS Code 窗口)。
  2. 在新窗口中按 Ctrl+Shift+P(或 Cmd+Shift+P)打开命令面板,输入并运行 Hello World 命令,即可看到弹窗。

五、核心概念

  1. 激活事件(Activation Events) 定义插件何时被激活(避免不必要的性能消耗),常见类型:

    • onCommand:命令名:命令被调用时
    • onStartupFinished:VS Code 启动完成后
    • onLanguage:语言名:打开特定语言文件时(如 onLanguage:javascript
  2. 贡献点(Contribution Points) 定义插件对 VS Code 的扩展点,常见类型:

    • commands:注册命令
    • keybindings:绑定快捷键
    • menus:添加右键菜单或顶部菜单
    • snippets:添加代码片段
    • themes:自定义主题
  3. API 调用 VS Code 提供了丰富的 API,例如:

    • vscode.window:操作窗口(弹窗、状态栏等)
    • vscode.workspace:操作工作区(文件、配置等)
    • vscode.editor:操作编辑器(文本编辑、选中内容等)

六、打包与发布

  1. 打包成 VSIX:安装打包工具:

    bash 复制代码
    npm install -g @vscode/vsce

    在项目根目录运行:

    bash 复制代码
    vsce package

    生成 your-extension-x.x.x.vsix 文件,可手动安装到 VS Code。

  2. 发布到市场 注册 Azure DevOps 账号,获取个人访问令牌(PAT),然后通过 vsce publish 发布到 VS Code 市场

相关推荐
羽沢3116 分钟前
ECharts 学习
前端·学习·echarts
LYFlied18 分钟前
WebAssembly (Wasm) 跨端方案深度解析
前端·职场和发展·wasm·跨端
七月丶19 分钟前
实战复盘:我为什么把 TypeScript 写的 CLI 工具用 Rust 重写了一遍?
前端·后端·rust
over69722 分钟前
《闭包、RAG与AI面试官:一个前端程序员的奇幻LangChain之旅》
前端·面试·langchain
JIngJaneIL27 分钟前
基于java+ vue交友系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·交友
拉不动的猪37 分钟前
回顾计算属性的缓存与监听的触发返回结果
前端·javascript·vue.js
karshey1 小时前
【IOS webview】h5页面播放视频时,IOS系统显示设置的icon
前端·ios
树欲静而风不止慢一点吧1 小时前
小米手环9应用/游戏开发快速入门
前端·javascript·小程序
用户313050086271 小时前
JavaScript中的迭代器和生成器
javascript