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

实现一个自己的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)
```