Skip to content

Vscode 插件开发

806字约3分钟

2024-08-27

为了适应 lua 代码的快捷电脑开发模式,方便调试学习 Vscode 插件开发技术。

安装依赖

采用 ts + vscode

npm install -g yo generator-code
yo code

项目结构解读

.
├── .gitignore
├── .vscode                     // VS Code 集成配置
│   ├── launch.json
│   ├── settings.json
│   └── tasks.json
├── .vscodeignore
├── README.md
├── src                         // 源码
│   └── extension.ts            // 如果是JavaScript插件,那么此处就是extension.js
├── test                        // 测试文件夹
│   ├── extension.test.ts       // 如果是JavaScript插件,那么此处就是extension.test.js
│   └── index.ts                // 如果是JavaScript插件,那么此处就是index.js
├── node_modules
│   ├── vscode                  // 语言服务
│   └── typescript              // typescript编译器(仅TypeScript插件才有)
├── out                         // 编译结果(仅TypeScript插件才有)
│   ├── src
│   |   ├── extension.js
│   |   └── extension.js.map
│   └── test
│       ├── extension.test.js
│       ├── extension.test.js.map
│       ├── index.js
│       └── index.js.map
├── package.json                // 插件的清单
├── tsconfig.json               // 如果是JavaScript插件,那么此处就是jsconfig.json
├── typings                     // 类型定义文件
│   ├── node.d.ts               // 链接到Node.js的API
│   └── vscode-typings.d.ts     // 链接到VS Code的API
└── vsc-extension-quickstart.md // 插件开发快速入门文档

插件配置信息

{
    "name": "myFirstExtension",
    "description": "",
    "version": "0.0.1",
    "publisher": "",
    "engines": {
        "vscode": "^0.10.1"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:extension.sayHello"
    ],
    "main": "./out/src/extension",
    "contributes": {
        "commands": [{
            "command": "extension.sayHello",
            "title": "Hello World"
        }]
    },
    "scripts": {
        "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
        "compile": "node ./node_modules/vscode/bin/compile -watch -p ./"
    },
    "devDependencies": {
        "typescript": "^1.7.5",
        "vscode": "^0.11.x"
    }
}

源代码

// 'vscode'模块包含了VS Code插件API
// 导入模块并且在下面你的代码中用vscode的别名引用这个模块
import * as vscode from 'vscode';
// 这个函数将在你的插件被激活时被调用
// 你的插件在第一次被执行命令的时候被激活
export function activate(context: vscode.ExtensionContext) {
    // 使用控制台去输出诊断信息(console.log)和错误信息(console.error)
    // 只有当你的插件被激活时才会执行下面这行代码
    console.log('Congratulations, your extension "my-first-extension" is now active!');
    // 这条命令被定义在package.json文件里
    // 现在使用registerCommand来提供这条命令的实现
    // commandId参数必须和package.json文件中的command成员匹配
    var disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        // 每次命令被执行的时候都将执行你这里的代码
        // 向用户显示一个消息提示框
        vscode.window.showInformationMessage('Hello World!');
    });
    context.subscriptions.push(disposable);
}
  • 每个插件都应该从他们的主文件中导出一个名为activate()函数,当在package.json文件中描述的activationEvents中的任何事件发生时,VS Code仅调用一次这个函数。
  • 如果一个插件使用了操作系统的资源(例如分裂出一个进程),那么插件可以在主文件中导出一个名为deactivate()的函数,VS Code在关闭的时候将会调用这个函数来清理工作资源。

单元测试

更加方便进行代码的测试编写

安装已打包的扩展(.vsix)

你可以手动地安装已打包成.vsix文件的VS Code扩展。只需要使用VS Code的命令行并提供相关.vsix文件的路径。

code myextension.vsix

扩展将会被安装到个人扩展文件夹.vscode/extensions中,你可以一次安装多个扩展,只要在命令行中提供多个.vsix文件的路径。

你也可以通过在VS Code中打开.vsix文件来安装扩展。点击文件 > 打开文件… 或者kb(workbench.action.files.openFile)并选择.vsix扩展文件。