ToB企服应用市场:ToB评测及商务社交产业平台

标题: 实现一个VSCode插件（从创建到发布） [打印本页]

---

作者: 八卦阵    时间: 2025-1-13 08:50
标题: 实现一个VSCode插件（从创建到发布）
实现一个自己的VSCode 插件

• 本文将以 yo 为例， 实现一个 VS Code 插件 从创建到发布。
  

1. 初始化项目

• 起首，我们必要安装 VS Code 扩展天生器
  

1. npm install -g yo generator-code

复制代码

• 安装完 yo 后，天生初始模版
  

1. yo code

复制代码

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

2. 项目结构

1. case-converter/
2. ├── package.json
3. ├── src/
4. │   └── extension.ts
5. ├── .vscodeignore
6. └── README.md

复制代码

3. 实现插件功能

• 我们只必要修改2文件的内容
  
• 以实现一个转化巨细写的功能为例子
  

• 修改 extension.ts =>
  

1. import * as vscode from 'vscode';
3. export function activate(context: vscode.ExtensionContext) {
4.     // 注册转换大写命令
5.     let toUpperCommand = vscode.commands.registerCommand('case-converter.toUpperCase', () => {
6.         const editor = vscode.window.activeTextEditor;
7.         if (editor) {
8.             const selection = editor.selection;
9.             const text = editor.document.getText(selection);
11.             editor.edit(editBuilder => {
12.                 editBuilder.replace(selection, text.toUpperCase());
13.             });
14.         }
15.     });
17.     // 注册转换小写命令
18.     let toLowerCommand = vscode.commands.registerCommand('case-converter.toLowerCase', () => {
19.         const editor = vscode.window.activeTextEditor;
20.         if (editor) {
21.             const selection = editor.selection;
22.             const text = editor.document.getText(selection);
24.             editor.edit(editBuilder => {
25.                 editBuilder.replace(selection, text.toLowerCase());
26.             });
27.         }
28.     });
30.     context.subscriptions.push(toUpperCommand, toLowerCommand);
31. }
33. export function deactivate() {}

复制代码

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

1. {
2.    // 省略其他配置 。。。
3.   "activationEvents": [
4.     "onCommand:case-converter.toUpperCase",
5.     "onCommand:case-converter.toLowerCase"
6.   ],
7.   "contributes": {
8.     "commands": [
9.       {
10.         "command": "case-converter.toUpperCase",
11.         "title": "Convert to Uppercase"
12.       },
13.       {
14.         "command": "case-converter.toLowerCase",
15.         "title": "Convert to Lowercase"
16.       }
17.     ],
18.     "keybindings": [
19.       {
20.         "command": "case-converter.toUpperCase",
21.         "key": "ctrl+shift+u",
22.         "mac": "cmd+shift+u"
23.       },
24.       {
25.         "command": "case-converter.toLowerCase",
26.         "key": "ctrl+shift+l",
27.         "mac": "cmd+shift+l"
28.       }
29.     ],
30.     "menus": {
31.       "editor/context": [
32.         {
33.           "when": "editorHasSelection",
34.           "command": "case-converter.toUpperCase",
35.           "group": "1_modification"
36.         },
37.         {
38.           "when": "editorHasSelection",
39.           "command": "case-converter.toLowerCase",
40.           "group": "1_modification"
41.         }
42.       ]
43.     }
44.   },
45. }

复制代码

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）
    
  1. # 打包插件
  2. vsce package
  3. # 发布插件
  4. vsce publish
  5. # 创建发布者
  6. vsce create-publisher (publisher name)
  7. # 登录
  8. vsce login (publisher name)

  复制代码
  
  

6. 下载自己发布的插件

• 发布完，过几分钟后就可以去， 搜刮自己发布的插件了
  
• 然后下载使用
  
  
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4