统计数据加载中...

准备工作与环境搭建

必备工具：

1. Node.js: VSCode 插件是基于 Node.js 运行的，确保安装 16.x 或更高版本。
2. Visual Studio Code

安装官方脚手架

VSCode 团队提供了一个官方的脚手架工具 generator-code，它可以帮助我们快速生成标准的插件项目结构。通过 yo 来使用它。

打开你的终端，运行以下命令来全局安装这两个工具：

npm install -g yo generator-code

提示：这是一个一次性的安装。未来再创建新插件时，无需重复此步骤。

创建第一个插件项目

1. 运行脚手架命令：

   yo code

2. 接下来，脚手架会以问答的形式引导你完成项目配置。下面是配置示例及解释：

选项	选择	解释
What type of extension?	New Extension (JavaScript)	选择你开发插件的语言
What's the name of your extension?	Console Wrapper	插件的名称
What's the identifier?	console-wrapper	插件的标识符，用作插件的唯一标识，直接回车默认即可
What's the description?	A simple extension to wrap selected text in a console.log.	插件功能的简短描述。
Enable JavaScript type checking?	No	是否开启类型检查，ts 与 js 的区别
Initialize a git repository?	Yes	是否初始化 git
Which package manager to use?	npm	选择你依赖的安装方式，npm 最好

完成后，脚手架会自动创建一个名为 console-wrapper 的文件夹，并安装所有依赖。当它提示 Your extension ... is now ready! 时，使用 VSCode 打开这个新创建的文件夹。

Hello World

进入项目后，VSCode 会自动识别出这是一个插件开发项目

1. 启动调试：按下 F5 键，mac 就是 Fn + F5 (或者转到侧边栏的“运行和调试”视图，点击绿色的“播放”按钮 Run Extension)。
2. 新窗口：VSCode 会启动一个名为 “扩展开发宿主” (Extension Development Host) 的新窗口。你可以将这个窗口理解为一个“沙箱”，我们开发的插件只会在这里生效，不会影响你正常的 VSCode 环境。
3. 执行默认命令：在这个新窗口中，按下 Ctrl+Shift+P (macOS: Cmd+Shift+P) 打开命令面板，输入 Hello World 并回车。

此时，你应该会在窗口右下角看到一个信息提示框，显示 "Hello World from Console Wrapper!"。

恭喜你！这标志着你的插件已经成功运行起来了！

插件开发

现在，让我们开始编写真正的功能。我们的目标是获取选中的文本，并用 console.log() 包裹它。

package.json

package.json 是插件的灵魂，它向 VSCode 声明了插件的身份、功能入口和激活时机

打开 package.json 文件，找到 activationEvents 和 contributes.commands 这两个字段，并修改它们：

// package.json

"activationEvents": [
    "onCommand:console-wrapper.wrapInConsoleLog"
],
"contributes": {
    "commands": [
        {
            "command": "console-wrapper.wrapInConsoleLog",
            "title": "Wrap in console.log"
        }
    ]
}

关键点解释：

• "contributes.commands": 在这里注册一个命令
  • "command": 命令的唯一 ID。这个 ID 的值必须与 activationEvents 中的值完全一致
  • "title": 启动这个插件的命令
• "activationEvents": 定义了插件在何时被“唤醒”。"onCommand:..." 表示只有当用户执行我们定义的这个命令时，插件的代码才会被加载和执行

extension.js

这个文件就是开发插件的文件，如果你用 ts 这个语言的话应该是在 src 目录下

打开 extension.js，将其内容替换为以下代码：

// extension.js

const vscode = require('vscode');

/**
 * @param {vscode.ExtensionContext} context 插件的上下文，可用于存储状态
 */
function activate(context) {
    console.log('Congratulations, your extension "console-wrapper" is now active!');

    // 注册我们的命令，这里的 commandId 必须与 package.json 中的一致
    const disposable = vscode.commands.registerCommand('console-wrapper.wrapInConsoleLog', function () {
        
        // 1. 获取当前活动的文本编辑器
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            vscode.window.showWarningMessage('No active editor found!');
            return; // 没有活动的编辑器，直接返回
        }

        // 2. 获取用户选中的文本范围
        const selection = editor.selection;
        const selectedText = editor.document.getText(selection);

        // 3. 判断是否选中了文本
        if (selectedText) {
            // 4. 使用 edit builder 在选区执行替换操作
            editor.edit(editBuilder => {
                // 将选中的文本替换为 'console.log(...);'
                editBuilder.replace(selection, `console.log('${selectedText}');`);
            });
            vscode.window.showInformationMessage('Wrapped in console.log successfully!');
        } else {
            vscode.window.showWarningMessage('Please select some text to wrap.');
        }
    });

    // 将注册的命令推入上下文的订阅中，当插件禁用时，资源会被自动释放
    context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
    activate,
    deactivate
}

代码逻辑分解：

1. 获取编辑器实例：vscode.window.activeTextEditor 指向用户当前正在操作的那个文件窗口
2. 获取选区：editor.selection 能拿到光标的位置或用户选中的范围
3. 获取文本：editor.document.getText(selection) 从文档中提取出选中的字符串
4. 执行编辑：editor.edit() 是在文档中进行修改的唯一正确方式，它能确保操作的可撤销性（用户可以按 Ctrl+Z 撤销）。我们用 console.log() 模板字符串替换了原来的选区。
5. 用户反馈：通过 showInformationMessage 或 showWarningMessage 给出操作结果的提示。

现在，再次按下 F5 启动调试。 在“扩展开发宿主”窗口中打开任意代码文件，选中一个变量，然后通过命令面板 (Ctrl+Shift+P) 运行我们新的命令 Wrap in console.log。你会看到选中的文本被成功替换了，并且右下角会有个消息，如果不选择的话右下角会有个警告

设置快捷键

打开 package.json，在 contributes 对象中添加一个新的 keybindings 属性：

// package.json

"contributes": {
    "commands": [
        // ... (原有的 commands 配置)
    ],
    "keybindings": [
        {
            "command": "console-wrapper.wrapInConsoleLog",
            "key": "ctrl+alt+l",
            "mac": "cmd+alt+l"
        }
    ]
},

• "key": Windows 的快捷键
• "mac": macOS/Linux 的快捷键

保存文件，无需重启调试！VSCode 会自动热更新快捷键的配置。直接回到“扩展开发宿主”窗口，选中一段文本，然后按下你刚刚设置的快捷键（例如 Cmd+Alt+L）

打包与分享

1. 安装打包工具 vsce：

   npm install -g vsce

2. 完善 README.md： 打包前，vsce 要求 README.md 文件必须编辑过，打开 README.md，为这个插件编写它的README文档

3. 执行打包： 在你的项目根目录下，运行：

   vsce package

   如果它警告 A 'repository' field is missing...，对于本地使用，可以直接输入 y 并回车继续。如果你打算发布到市场，则应在 package.json 中添加一个 repository 字段指向你的 Git 仓库

   命令执行成功后，你会在项目根目录看到一个新文件，例如 console-wrapper-0.0.1.vsix。

4. 本地安装：

   • 打开你正常使用的 VSCode (不是开发宿主)。
   • 切换到“扩展”侧边栏。
   • 点击顶部的 ... 菜单，选择 “从 VSIX 安装...” (Install from VSIX...)。
   • 选择你刚才生成的 .vsix 文件。

安装完成后，你的第一个插件就正式进驻你的编辑器了！

总结

通过本教程，你学会了如何开发 VSCode 插件

这只是冰山一角，你可以继续探索VSCode API：

• Webview API：在 VSCode 中创建复杂的、基于 HTML/CSS/JS 的用户界面
• Language Server Protocol: 为一门新的语言提供智能提示、错误检查等高级功能
• TreeView API: 在侧边栏创建自定义的树状视图，就像文件管理器一样

希望这篇教程能成为你开启 VSCode 插件开发之旅的坚实一步。现在，去把你那些自动化的奇思妙想变成现实吧！

官方文档是最好的老师：VS Code Extension API

暂无评论

暂无评论，来添加第一条评论吧！