当前位置：首页 > article >正文

实现一个VSCode插件（从创建到发布）

article 2025/1/16 1:30:21

实现一个自己的VSCode 插件

本文将以 yo 为例，实现一个 VS Code 插件从创建到发布。
文章目录
- 实现一个自己的VSCode 插件
- - - 1. 初始化项目
    - 2. 项目结构
    - 3. 实现插件功能
    - 4. 测试和运行插件
    - 5. 发布
    - 6. 下载自己发布的插件

1. 初始化项目

首先，我们需要安装 VS Code 扩展生成器

npm install -g yo generator-code

安装完 yo 后，生成初始模版

yo code

然后我们会填写扩展名，描述，语言等
我们以语言选择： TypeScript ，打包选择：webpack 为例。

2. 项目结构

case-converter/
├── package.json
├── src/
│   └── extension.ts
├── .vscodeignore
└── README.md

3. 实现插件功能

我们只需要修改2文件的内容
以实现一个转化大小写的功能为例子

修改 extension.ts =>

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // 注册转换大写命令
    let toUpperCommand = vscode.commands.registerCommand('case-converter.toUpperCase', () => {
        const editor = vscode.window.activeTextEditor;
        if (editor) {
            const selection = editor.selection;
            const text = editor.document.getText(selection);

            editor.edit(editBuilder => {
                editBuilder.replace(selection, text.toUpperCase());
            });
        }
    });

    // 注册转换小写命令
    let toLowerCommand = vscode.commands.registerCommand('case-converter.toLowerCase', () => {
        const editor = vscode.window.activeTextEditor;
        if (editor) {
            const selection = editor.selection;
            const text = editor.document.getText(selection);

            editor.edit(editBuilder => {
                editBuilder.replace(selection, text.toLowerCase());
            });
        }
    });

    context.subscriptions.push(toUpperCommand, toLowerCommand);
}

export function deactivate() {}

修改 package.json => 主要替换 activationEvents 和 contributes

{
   // 省略其他配置 。。。
  "activationEvents": [
    "onCommand:case-converter.toUpperCase",
    "onCommand:case-converter.toLowerCase"
  ],
  "contributes": {
    "commands": [
      {
        "command": "case-converter.toUpperCase",
        "title": "Convert to Uppercase"
      },
      {
        "command": "case-converter.toLowerCase",
        "title": "Convert to Lowercase"
      }
    ],
    "keybindings": [
      {
        "command": "case-converter.toUpperCase",
        "key": "ctrl+shift+u",
        "mac": "cmd+shift+u"
      },
      {
        "command": "case-converter.toLowerCase",
        "key": "ctrl+shift+l",
        "mac": "cmd+shift+l"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "when": "editorHasSelection",
          "command": "case-converter.toUpperCase",
          "group": "1_modification"
        },
        {
          "when": "editorHasSelection",
          "command": "case-converter.toLowerCase",
          "group": "1_modification"
        }
      ]
    }
  },
}

4. 测试和运行插件

可以通过 package.json 中的 npm run compile 然后 npm run watch 打开调试；
也可以通过直接 F5 直接进行调试；
然后我们会看到调试按钮，以及弹出另外一个调试的 VS Code 窗口
我们在另外弹出的 VS Code 窗口里测试一下
我们可以看到 package.json 中配置到 toUpperCase 和 toLowerCase , 选中文案点击便可实现插件功能

5. 发布

创建 Azure 账号（如果有账号跳过）
- 先去创建 Azure 账号和 Azure DevOps 组织 => 点击跳转
- 登录后创建项目
- 然后右上角创建

创建时选择 Marketplace 勾选 ✓ Acquire ✓ Publish ✓ Manage

2. 第二步去创建 Visual Studio Marketplace 账号
- 直接通过微软 Azure 账号登陆
- 设置名称和 id （后边上传时要检查 package.json 中的 publisher 是否相同）

第三部上传
- 方法1 ：安装 npm install -g @vscode/vsce
- 然后打包执行打包命令 vsce package => 生成 .vsix 文件
- 然后点击 New extension 选择 Visual Studio Code 弹出弹窗把 .vsix 上传即可
- 方法2 : 通过 vsce 命令完成，登陆会填写 token （token 为 Azure 创建的 token）
```
# 打包插件
vsce package
# 发布插件
vsce publish
# 创建发布者
vsce create-publisher (publisher name)
# 登录
vsce login (publisher name)
```